成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css字體相關(guān)樣式的處理

mdluo / 1145人閱讀

摘要：連字符斷行實(shí)現(xiàn)文本兩端對(duì)齊的方式，可以使用，它接收三個(gè)值和。效果如下插入換行上面這種格式的實(shí)現(xiàn)，看似簡(jiǎn)單有很讓人頭疼，這種格式的形式由于和都是塊級(jí)元素，導(dǎo)致了名字和值都會(huì)換行，有一種很好的處理辦法字符中代表?yè)Q行符。

連字符斷行

實(shí)現(xiàn)文本兩端對(duì)齊的方式，可以使用hyphens，它接收三個(gè)值none、manual 和auto。manual是它的初始值，將hyphens設(shè)置成auto可以實(shí)現(xiàn)。為了確保它奏效，需要在HTML標(biāo)簽的lang屬性中指定合適的語(yǔ)言。

效果如下：

插入換行

上面這種格式的實(shí)現(xiàn)，看似簡(jiǎn)單有很讓人頭疼，這種格式的DOM形式：


  
Name:

  
Lea Verou

  
Email:

  
[email protected]

  
[email protected]

  
Location:

  
Earth

由于dt和dd都是塊級(jí)元素，導(dǎo)致了名字和值都會(huì)換行，有一種很好的處理辦法：

dt, dd {
    display: inline;
}

dd + dt::before {
    content: "A";
    white-space: pre;
}

dd + dd::before {
    content: ", ";
    font-weight: normal;
}

Unicode字符中A代表?yè)Q行符。通過(guò)設(shè)置 white-space: pre，保留源代碼中的這些空白符和換行

文本行的斑馬條紋的實(shí)現(xiàn)

主要思路是：在CSS 中用漸變直接生成背景圖像，并且用em 單位來(lái)設(shè)定背景尺寸，這
樣背景就可以自動(dòng)適應(yīng)font-size 的變化了。
具體的實(shí)現(xiàn)如下：

    urlParams.gitName = record.gitName;
    for (let item in record) {
       if (record[item] == currentId) {
           urlParams.stage = item;
       }
    }
    localStorage.setItem("urlParams", JSON.stringify(urlParams));

.code {
    padding: .5em;
    line-height: 1.5;
    tab-size: 4; /* 接受一個(gè)數(shù)字或者一個(gè)長(zhǎng)度值控制代碼縮進(jìn) */
    background: beige;
    background-size: auto 3em;
    background-origin: content-box;
    background-image: linear-gradient(rgba(0,0,0,.2) 50%, transparent 0);
}

效果如下：

美化&符號(hào)

在寫(xiě)頁(yè)面時(shí)，有時(shí)會(huì)出現(xiàn)經(jīng)過(guò)美化過(guò)的&符號(hào)，如果用src多帶帶指定某一種字體的話會(huì)增加http請(qǐng)求的次數(shù)，通過(guò)local這個(gè)函數(shù)可以解決這個(gè)問(wèn)題，它可以指定本地字體的名稱。

在使用font-face將local這個(gè)函數(shù)引入時(shí)，需要指定要渲染的某一個(gè)特定的字符，就需要使用unicode-range，它只在@font-face 規(guī)則內(nèi)部生效，它并不是一個(gè)CSS屬性

unicode-range它的語(yǔ)法是基于“Unicode碼位”，因此需要知道字符的十六進(jìn)制碼位，通過(guò)
"&".charCodeAt(0).toString(16);（返回26） 得到&的十六進(jìn)制編碼

@font-face {
    font-family: Ampersand;
    src: local("Baskerville-Italic"),
    local("GoudyOldStyleT-Italic"),
    local("Palatino-Italic"),
    local("BookAntiqua-Italic");
    unicode-range: U+26;
}
h1 {
    font-family: Ampersand, Helvetica, sans-serif;
}

最終的效果如下：

自定義下劃線的方法

處理css默認(rèn)樣式下劃線的方法可以使用background-image及其相關(guān)的屬性，通過(guò)它設(shè)置漸變達(dá)到效果。
具體的實(shí)現(xiàn)如下：

 span {
    background: linear-gradient(gray, gray) no-repeat;
    background-size: 100% 1px;
    background-position: 0 1.15em;
    /* 如果下劃線在遇到字母時(shí)會(huì)自動(dòng)斷開(kāi)避讓,通過(guò)設(shè)置text-shadow模擬*/
    text-shadow: .05em 0 white, -.05em 0 white;
  }

效果如下：

文字凸起、空心、發(fā)光的等效果的實(shí)現(xiàn)

實(shí)現(xiàn)凸版印刷字體的效果

使用投影的效果達(dá)到，具體的實(shí)現(xiàn)如下：

  .div {
    background: hsl(210, 13%, 60%);
    color: hsl(210, 13%, 30%);
    text-shadow: 0 1px 1px hsla(0,0%,100%,.8);
  }

最終的效果：

空心字效果的實(shí)現(xiàn)

方法是使用用text-shadow 屬性的擴(kuò)張參數(shù)就可讓投影變大，看起來(lái)就像給文字勾邊了一樣；或者是使用svg

用text-shadow:

div {    
    color: white;
    text-shadow: 1px 1px black, -1px -1px black,
                 1px -1px black, -1px 1px black;
}

最終效果：

用svg的方法：


    
      
      CSS
    

 h1 {
    font: 500%/1 Rockwell, serif;
    background: deeppink;
    color: white;
  }
  h1 text {
    fill: currentColor;
  }
  h1 svg { 
    overflow: visible
  }
  h1 use {
    stroke: black;
    stroke-width: 6;
    stroke-linejoin: round;
  }

效果如下：

svg的實(shí)現(xiàn)方式雖然語(yǔ)法復(fù)雜，但是它的視覺(jué)效果卻是最好的。

文字外發(fā)光的效果
實(shí)現(xiàn)的方法就是使用重疊的text-shadow即可，不需要考慮偏移量，顏色也只需跟文字保持一致。

.hi {
    background: #203;
    color: #ffc;
    text-shadow: 0 0 .1em, 0 0 .3em;
  }

效果如下：

文字凸起的效果

.css3d {
    background: #58a;
    color: white;
    text-shadow: 0 1px hsl(0,0%,85%),
    0 2px hsl(0,0%,80%),
    0 3px hsl(0,0%,75%),
    0 4px hsl(0,0%,70%),
    0 5px hsl(0,0%,65%);
    0 5px 10px black;
}

效果如下：

環(huán)形文字的實(shí)現(xiàn)
使用svg實(shí)現(xiàn)


   
       
        
          Each data point or cell of a cube is the
        
    

  .circular {
    width: 300px;
    height: 300px;
    margin: 3em auto 0;
  }
  .circular svg {
    display: block;
    overflow: visible;
  }
  .circular path { 
    fill: none; 
  }

效果如下：

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111947.html

相關(guān)文章

  • webpack4 系列教程(十一)：字體文件處理

    摘要：或者來(lái)我的小站看更多內(nèi)容課程介紹和資料本節(jié)課源碼所有課程源碼本節(jié)課的代碼目錄如下本節(jié)課的內(nèi)容如下準(zhǔn)備字體文件和樣式如上面的代碼目錄所示，字體文件和樣式都放在了目錄下。編寫(xiě)按照上面的配置，打包好的和均位于文件夾下。 教程所示圖片使用的是 github 倉(cāng)庫(kù)圖片，網(wǎng)速過(guò)慢的朋友請(qǐng)移步《webpack4 系列教程(十一)：字體文件處理》原文地址?；蛘邅?lái)我的小站看更多內(nèi)容：godbmw.com...

    UnixAgain 評(píng)論0 收藏0

  • 前端面試之路一(HTML+CSS面試整理)

    摘要：或表示紅色，表示綠色，表示藍(lán)色，也可取其他數(shù)值來(lái)指定顏色。針對(duì)多字節(jié)文字，中文句子也是單詞允許在單詞內(nèi)換行。 一、HTML基礎(chǔ) html常見(jiàn)元素和理解 html常見(jiàn)元素分類 head區(qū)元素：（不會(huì)在頁(yè)面上留下直接內(nèi)容） meta title style link script base body區(qū)： div/selection/article/aside/header/f...

    hqman 評(píng)論0 收藏0

  • 前端面試之路一(HTML+CSS面試整理)

    摘要：或表示紅色，表示綠色，表示藍(lán)色，也可取其他數(shù)值來(lái)指定顏色。針對(duì)多字節(jié)文字，中文句子也是單詞允許在單詞內(nèi)換行。 一、HTML基礎(chǔ) html常見(jiàn)元素和理解 html常見(jiàn)元素分類 head區(qū)元素：（不會(huì)在頁(yè)面上留下直接內(nèi)容） meta title style link script base body區(qū)： div/selection/article/aside/header/f...

    YacaToy 評(píng)論0 收藏0

  • CSS編碼規(guī)范

    摘要：代碼風(fēng)格文件建議文件使用無(wú)的編碼。解釋編碼具有更廣泛的適應(yīng)性。示例空格強(qiáng)制選擇器與之間必須包含空格。示例字號(hào)強(qiáng)制需要在平臺(tái)顯示的中文內(nèi)容，其字號(hào)應(yīng)不小于。示例響應(yīng)式強(qiáng)制不得單獨(dú)編排，必須與相關(guān)的規(guī)則一起定義。 轉(zhuǎn)載：原地址 1 前言 CSS作為網(wǎng)頁(yè)樣式的描述語(yǔ)言，在百度一直有著廣泛的應(yīng)用。本文檔的目標(biāo)是使CSS代碼風(fēng)格保持一致，容易被理解和被維護(hù)。 雖然本文檔是針對(duì)CSS設(shè)計(jì)的，...

    flyer_dev 評(píng)論0 收藏0

  • iconfont實(shí)踐小結(jié)

    摘要：所以實(shí)現(xiàn)小圖標(biāo)時(shí)雪碧圖跟圖標(biāo)字體會(huì)在一個(gè)網(wǎng)站共存，自定義圖標(biāo)字體為什么比較耗時(shí)，且太復(fù)雜圖標(biāo)無(wú)法實(shí)現(xiàn)請(qǐng)往下看開(kāi)發(fā)流程就了解了。參考資料細(xì)談淺談圖標(biāo)字體向下兼容優(yōu)雅降級(jí)技術(shù)繪制小圖標(biāo)技巧雪碧圖圖標(biāo)字體矢量小圖標(biāo)設(shè)計(jì)本文對(duì)應(yīng)源碼源碼地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前寫(xiě)了一篇關(guān)于雪碧圖的博文，...

    bitkylin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<