css字體相關樣式的處理

mdluo 發布于2019-08-29 12:30 / 1142人閱讀

摘要：連字符斷行實現文本兩端對齊的方式，可以使用，它接收三個值和。效果如下插入換行上面這種格式的實現，看似簡單有很讓人頭疼，這種格式的形式由于和都是塊級元素，導致了名字和值都會換行，有一種很好的處理辦法字符中代表換行符。

連字符斷行

實現文本兩端對齊的方式，可以使用hyphens，它接收三個值none、manual 和auto。manual是它的初始值，將hyphens設置成auto可以實現。為了確保它奏效，需要在HTML標簽的lang屬性中指定合適的語言。

效果如下：

插入換行

上面這種格式的實現，看似簡單有很讓人頭疼，這種格式的DOM形式：


  Name:
  Lea Verou
  Email:
  lea@verou.me
  lea@verou.me
  Location:
  Earth

由于dt和dd都是塊級元素，導致了名字和值都會換行，有一種很好的處理辦法：

dt, dd {
    display: inline;
}

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

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

Unicode字符中A代表換行符。通過設置 white-space: pre，保留源代碼中的這些空白符和換行

文本行的斑馬條紋的實現

主要思路是：在CSS 中用漸變直接生成背景圖像，并且用em 單位來設定背景尺寸，這
樣背景就可以自動適應font-size 的變化了。
具體的實現如下：

    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; /* 接受一個數字或者一個長度值控制代碼縮進 */
    background: beige;
    background-size: auto 3em;
    background-origin: content-box;
    background-image: linear-gradient(rgba(0,0,0,.2) 50%, transparent 0);
}

效果如下：

美化&符號

在寫頁面時，有時會出現經過美化過的&符號，如果用src多帶帶指定某一種字體的話會增加http請求的次數，通過local這個函數可以解決這個問題，它可以指定本地字體的名稱。

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

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

@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默認樣式下劃線的方法可以使用background-image及其相關的屬性，通過它設置漸變達到效果。
具體的實現如下：

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

效果如下：

文字凸起、空心、發光的等效果的實現

實現凸版印刷字體的效果

使用投影的效果達到，具體的實現如下：

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

最終的效果：

空心字效果的實現

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

用text-shadow:

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

最終效果：

用svg的方法：

 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的實現方式雖然語法復雜，但是它的視覺效果卻是最好的。

文字外發光的效果
實現的方法就是使用重疊的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;
}

效果如下：

環形文字的實現
使用svg實現

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

效果如下：

云服務器 GPU云服務器 css的樣式 html的css樣式酷炫html樣式字體 css樣式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/111947.html

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

摘要：或者來我的小站看更多內容課程介紹和資料本節課源碼所有課程源碼本節課的代碼目錄如下本節課的內容如下準備字體文件和樣式如上面的代碼目錄所示，字體文件和樣式都放在了目錄下。編寫按照上面的配置，打包好的和均位于文件夾下。教程所示圖片使用的是 github 倉庫圖片，網速過慢的朋友請移步《webpack4 系列教程(十一)：字體文件處理》原文地址。或者來我的小站看更多內容：godbmw.com...

UnixAgain 2019-08-23 12:17 評論0 收藏0
前端面試之路一(HTML+CSS面試整理)

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

hqman 2019-08-02 12:09 評論0 收藏0
前端面試之路一(HTML+CSS面試整理)

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

YacaToy 2019-08-29 17:26 評論0 收藏0
CSS編碼規范

摘要：代碼風格文件建議文件使用無的編碼。解釋編碼具有更廣泛的適應性。示例空格強制選擇器與之間必須包含空格。示例字號強制需要在平臺顯示的中文內容，其字號應不小于。示例響應式強制不得單獨編排，必須與相關的規則一起定義。轉載：原地址 1 前言 CSS作為網頁樣式的描述語言，在百度一直有著廣泛的應用。本文檔的目標是使CSS代碼風格保持一致，容易被理解和被維護。雖然本文檔是針對CSS設計的，...

flyer_dev 2019-08-28 18:04 評論0 收藏0
iconfont實踐小結

摘要：所以實現小圖標時雪碧圖跟圖標字體會在一個網站共存，自定義圖標字體為什么比較耗時，且太復雜圖標無法實現請往下看開發流程就了解了。參考資料細談淺談圖標字體向下兼容優雅降級技術繪制小圖標技巧雪碧圖圖標字體矢量小圖標設計本文對應源碼源碼地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前寫了一篇關于雪碧圖的博文，...

bitkylin 2019-08-29 13:00 評論0 收藏0