碼上快樂

相關內容    簡體    繁體

CSS Web Fonts 網絡字體

本文轉載自   查看原文   2019-11-28 16:01   736    網絡字體/ CSS/ css/ web fonts/ 字體圖標

Fonts

1. CSS font-family

在 CSS 中，可以使用 font-family 屬性來指定字體，瀏覽器渲染文字時候會根據這個屬性應用於元素。如果沒有指定這個屬性或者指定的字體不存在於客戶的計算機上，則瀏覽器會使用默認字體。

    <style>
        .line {
            font-family: 'Courier New', Courier, monospace;
        }
    </style>
    <p>Hello World!</p>
  • 如果沒有設置 font-family，瀏覽器會使用默認字體應用於元素。
  • 如果 font-family 屬性指定的字體，在本地計算機沒有，則使用默認字體
  • 如果字體的名稱有空格，則必須要使用引號。
  • 使用 font-family 屬性可以指定一個字體，也可以指定一組字體列表——將多個字體用逗號分割
  • 如果指定一組字體列表，則會依次查找，第一個字體本地沒有，則使用第二個。如果指定的字體列表中的字體，本地計算機都沒有，則瀏覽器使用默認字體應用於元素

2. Web safe fonts (網絡安全字體)

系統中通常只有一定數量的字體可用，並且不同的系統中的字體可能不相同，所以在 Windows 上可以用的字體，在其他系統中不一定可以用。

開發者指定的字體，在自己的電腦上已經被安裝，所以可以正常顯示。但客戶端機器並沒有安裝整個字體，則客戶端會使用默認字體顯示。所以開發者考慮哪一些字體是客戶端基本都會被安裝的。

有一些字體在常見系統（Windows, Mac, 常見的Linux發行版, Android和iOS版本）中都可以用，這些字體就是安全字體。
具體參考：
https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#Web_safe_fonts

3. Web fonts (網絡字體)

Web 字體是一種 CSS 功能，允許指定的字體文件被下載到本地。

這是一種非常有效的方式，這樣字體就不受限於本地是否安裝了字體，而且大部分瀏覽器都支持Web 字體。

網絡字體使用方式：

  • Setp 1 下載網絡字體；在 CSS 中，使用 @font-face 關鍵字下載網絡字體，有2個必要屬性

    • src 指定字體資源，

    • font-family 自定義一個名稱。

      @font-face {
      font-family: "myFont";
      src: url("myFont.ttf");
  }

  • Setp 2 使用字體；設置 font-family 屬性，而這時 font-family 設置的是網絡字體的名稱，而不再是系統的字體。(網絡字體的名稱在上一步已經定義。)

      .line {
    font-family: 'myFont;
  }

3.1. 關於Web字體

  1. Web 字體作為一種技術，從 IE 4 開始就得到了支持。
  2. 瀏覽器支持不同的字體格式，因此您需要多種字體格式以獲得良好的跨瀏覽器支持。
    大多數瀏覽器都支持WOFF/WOFF2(Web Open Font Format versions 1 and 2, Web 開放字體格式版本1和2)，它是最有效的格式，但似乎舊版本IE只支持EOT(Embedded Open Type, 嵌入式開放類型)的字體，可能需要包含一個SVG版本的字體支持舊版本的 iPhone 和 Android 瀏覽器。
  3. 字體一般都不能自由使用。必須為他們付費，或者遵循其他許可條件，比如在代碼中(或者在您的站點上)提供字體創建者。不應該在沒有授權的情況下偷竊字體。

3.2. 字體格式

  • TureType(.ttf)格式

    .ttf 字體是 Windows 和 Mac 的最常見的字體，是一種 RAW 格式，支持這種字體的瀏覽器有 ID9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+

  • OpenType(.otf)格式

    .otf 字體被認為是一種原始的字體格式，其內置在 TureType 的基礎上，支持這種字體的瀏覽器有 Firefox 3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+

  • Web Open Font Format(.woff) 格式

    .woff 字體是 Web 字體中最佳格式，它是一個開放的 TrueType/OpenType 的壓縮版本，同時也支持元數據包的分離，支持這種字體的瀏覽器有 IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+

  • Embedded Open Type(.eot)格式

    .eot 字體是 IE 專用字體，可以從 TrueType創建此格式字體，支持這種字體的瀏覽器有 IE4+

  • SVG(.svg)格式

    .svg 字體是基於 SVG 字體渲染的一種格式，支持這種字體的瀏覽器有 Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+

不同的瀏覽器支持的格式不同，一些瀏覽器的老舊版本，它們只支持老舊版本的字體格式。例如， 大多數現代瀏覽器都支持WOFF / WOFF2(Web Open Font Format versions 1 and 2，Web開放字體格式版本1和2)，它是最有效的格式，但是舊版本IE只支持EOT (Embedded Open Type，嵌入式開放類型)的字體,你可能需要包括一個SVG版本的字體支持舊版本的iPhone和Android瀏覽器

所以我們一般都會把這幾種字體都提供，讓瀏覽器自己選擇，這樣可以獲得更好的兼容性。

字體一般不能自由使用，必須要付費，或者遵循一些條件。不應該在沒有授權的情況下偷竊字體。

3.3. 聲明字體，@font-face

@font-face {
    font-family: 'myFont';
    font-display: swap;
    src: url('webfont.eot'); /* IE9 */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('webfont.woff2') format('woff2'),
    url('webfont.woff') format('woff'), /* chrome、firefox */
    url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}

font-family 定義字體的名稱，就像“宋體”，“微軟雅黑”，“console”之類的內置的字體一樣。

src 有2部分：

  • url：指定要導入（下載）的字體文件的路徑

  • format：聲明字體文件的格式，它允許瀏覽器更快地找到可以使用的字體，可選項。

src 可以列出多個聲明，用逗號分隔。

瀏覽器按聲明順序找到它可以使用的字體，因此把最好的格式放在前面，把比較久的格式放在后面。比如WOFF2一般放在最前面，TTF放在最后面。

eot字體和IE是一個例外，eot是IE創建的一種格式，只有IE支持，並且IE9不支持format聲明，所以會有2個src聲明，其中一個是專門針對eot和IE9的

http://www.w3help.org/zh-cn/causes/RF1001

https://www.w3.org/Submission/EOT/

4. 獲取網絡字體

可以通過一些字體服務商獲取字體，有一些是收費的，也有一些是免費的。

4.1. 通過互聯網獲得字體，使用 iconfont

國內也有不少網站提供字體，但一般用阿里的 iconfont ，在首頁上方的菜單欄選擇 在線字體

Step 1 在最上面的文本框中輸入要應用字體的文字，比如：

我是一個任性的孩子，我希望，每一個時刻都象彩色蠟筆那樣美麗。

（輸入的這行句子總共有30個文字）

Step 2 添加你要應用的字體格式。

Step 3 下載並解壓文字，

在你需要應用的字體文字的展示框里，選擇本地下載，下載得到一個zip文件，將其解壓，就得到了字體文件。

阿里提供了在線引用和下載到本地兩種引用方式，但這里我們選擇下載，本地測試不能使用在線引用。@@@具體官方有解釋，參考官方的 webfont前端使用幫助 里 Q&A 的第三條。

解壓之后會看到有.eot .svg .ttf .woff .woff2 這些格式的文件，這些就是字體文件。

4.2. 簡單了解字體文件

這些文件直接打開，基本都是亂碼，沒法直接查看，唯獨 .svg 我們是可以直接打開的。

打開 .svg 我們可以發現2個重要的東西：

  • （針對我剛才那段文字生成的svg）里面總共有26個 <glyph> 元素
  • 每個元素都有一個 unicode 屬性

首先來看 unicode 屬性：

這個 unicode 屬性就是表示一個文字的 unicode 碼，我們截取剛才輸入文字的部分，看下面文字和 unicode 編碼的對照：

我       是      一      個       任      性      的       孩      子       ，
&#25105;&#26159;&#19968;&#20010;&#20219;&#24615;&#30340;&#23401;&#23376;&#65292;
&#x6211;&#x662f;&#x4e00;&#x4e2a;&#x4efb;&#x6027;&#x7684;&#x5b69;&#x5b50;&#xff0c;

（第一行是文字，第二行是對應的10進制 unicode 編碼，第三行是對應的16進制 unicode 編碼）

.svg 文件里的 unicode 使用的是16進制 unicode 編碼，所以把上面的16進制 unicode 編碼去 .svg 文件里查找，每一個都能找到。並且仔細看 <glyph>的排序方式，是根據 unicode 編碼順序排序的。所以每一個 <glyph> 都對應了一個文字的 unicode 和顯示（屬性d）。

再來看 <glyph> 元素：

每一個 <glyph> 都對應了一個文字的 unicode 和顯示（屬性d），但這里總共只有26個 <glyph> ，而我們的文字總共有30個，為什么只有26個 <glyph> 呢？

因為我們輸入的30個文字中有3個文字是重復的：“我”，“一“，“，”（逗號）。不重復的文字共26個，所以阿里的 iconfont 只給我們生成了我們輸入的這個26個文字，並且是根據 unicode 編碼順序排序的。所以這里要注意我們下載的字體只有這26個文字，其他文字沒有這種字體。

另外還有個.html文件，這是使用字體的詳細步驟，共3步。

4.3. 聲明和使用字體

其實使用方式在 .html 文件里都有說明，跟着操作即可。

    <style>
        /* 第一步：使用font-face聲明字體 */
        @font-face {
            font-family: 'hello-web-font';
            font-display: swap;
            src: url('webfont.eot');
            /* IE9 */
            src: url('webfont.eot?#iefix') format('embedded-opentype'),
                /* IE6-IE8 */
                url('webfont.woff2') format('woff2'),
                url('webfont.woff') format('woff'),
                /* chrome、firefox */
                url('webfont.ttf') format('truetype'),
                /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
                url('webfont.svg#webfont') format('svg');
            /* iOS 4.1- */
        }
        /* Step 2, 定義使用 webfont 的樣式 */
        .my-web-font {
            font-family: "hello-web-font" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>
    <!-- Step 3. 為文字加上對應的樣式 -->
    <p class="my-web-font">我是一個任性的孩子，我希望，每一個時刻都象彩色蠟筆那樣美麗。</p>
    <p class="my-web-font">我希望，能在心愛的白紙上畫畫，畫出笨拙的自由</p>

上面的例子中，特地多加了一行話，來看一下結果：

我是一個任性的孩子，我希望，每一個時刻都象彩色蠟筆那樣美麗。

我希望，能在心愛的白紙上畫畫，畫出笨拙的自由

結果差不多如上面這種效果，為什么有一些字體被改變，有一些使用的確實默認字體呢？

因為我們生成的字體文件只有我們生成的那26個文字，第一行就是我們生成的內容，所以第一行全部改變了字體，而第二行只有字體文件中包含的那幾個文字（ unicode 編碼），才會有對應的字體實現。

5. 字體圖標

首先來看一下不同的字體，下面有3種不同的字體，分別是：默認字體、vivaldi 字體、Wingdings 字體。

（這個3個字體都是 Windows 系統默認就已經安裝的字體）

<span>ABC123</span>
<span style="font-family:vivaldi">ABC123</span>
<span style="font-family:Wingdings">ABC123</span>

上面的代碼輸出結果如下：

ABC123

ABC123

ABC123

第一行是默認字體。

第二行字體非常漂亮，但也很好理解，因為我們在處理文檔時會經常使用各種漂亮的字體。

第三個就比較奇怪了，第三行就是"ABC123"，但是字體把他顯示成了"特殊"的文字，用戶感覺這不像一個文字，更像一個圖標，但本質上他就是一個文字、一段編碼。

所以字體圖標就是一個文字，稱作字體“圖標”是因為應用某個字體之后，這個文字看上去“像”一個”圖標“。

5.1. 字體圖標的應用

網站上總是有各種圖標，比如返回按鈕有一個表示返回的小圖標，比如菜單欄——用戶信息一般有個用戶小人圖標，購物車有個購物車圖標。

以前小圖標都是用精靈圖處理，精靈圖處理有3個缺點

  • 要寫樣式
  • 精靈圖是小圖片，放大會失真
  • 精靈圖是圖片，無法修改顏色

在CSS中，可以使用字體圖標替代精靈圖，並且有許多優點：

  1. 將所有圖標打包成字體庫、減少請求（字體被打包，訪問網頁時候一次性被下載）
  2. 具有矢量性，放大不會失真，隨意放大縮小可保證清晰度
  3. 使用靈活，便於維護（因為他是一個文字，所以可以所以修改顏色、樣式、大小等；對字體應用字體樣式要比修改圖片靈活的多。）

5.2. 通過互聯網獲得字體圖標，使用 iconfont

字體圖標本質上就是文字，所以生成字體圖標和生成Web字體沒有任何區別。在 iconfont 首頁上方的菜單欄找到 圖標庫 - 官方圖標庫

在圖表庫中搜索自己想要的圖標，然后鼠標移動到圖標上選擇那個”購物車“，把圖標保存到自己的購物車里。

圖標都添加完成之后，選擇右上角的購物車，然后在購物車里選擇添加到項目。（如果沒項目則添加項目）

然后進入項目頁面，在項目頁面選擇“下載到本地”

打開文件夾會發現和網絡字體一樣，會有多個字體文件和一個demo.html。詳細操作在demo.html里頭都有。

接下去，使用方式就和網絡字體一樣（使用 unicode 字體），

Step 1 聲明字體，使用 @font-face

Step 2 定義樣式

Step 3 應用樣式，注意：這一部需要指定具體 unicode 編碼

使用字體圖標的步驟 Step 3 看上去略微不同——需要自己指定 unicode 編碼，但實際上和字體文字一樣（字體圖標就是字體文字），因為在字體文字里頭，我也強調了我們只下載了我們生成的文字，如果對字體文件里沒有的文字應用該字體，則這些文字不會有任何變化，會使用默認字體顯示。所以字體圖標的 Step 3 ——要指定自己的 unicode 編碼，其實和字體文字一樣，只不過字體圖標在使用的時候我們就是要使用指定的圖標（文字），所以你需要使用哪個圖標，就要在這里使用對應 unicode 編碼。

前面兩個步驟和字體文字一樣，且demo.html種已經有詳細描述，只是 Step 3 要注意使用對應的 unicode 編碼，比如我使用的一個購物車圖標的 unicode 編碼是：&#xe63c;

<span class="hello-icon-font">&#xe63c;</span>

5.3. 結合偽元素使用

unicode 編碼的方式出現在 HTML 里頭，不直觀，如果光看代碼，不可能知道這表示一個購物車“圖標”

<span class="my-icon-font">&#xe63c;</span>

使用CSS偽元素添加文字（unicode 編碼），並且通過給CSS樣式的名稱更加直觀，這是一個好主意。

比如：

Step 2 定義字體圖標樣式

.my-icon-font{
    font-family: hello-icon-font;
}

Step 3 使用偽元素，因為這個“圖標”表示一個購物車，所以給定義的樣式名稱叫“cart”，這樣更直觀。

.cart::before{
    content: "\e641"; /* &#xe641 */
}

既然是一個字體，就能修改字體屬性，（之前樣式寫在 Step 2 里）

.cart::before{
    content: "\e641"; /* &#xe641 */
    color: red;
    font-size: 50px;
}

Step 4 就是原來的 Step 3 ，應用樣式到元素

<span class="my-icon-font cart"></span>

參考：

https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 CSS3之嵌入Web字體 variable fonts - 更小更靈活的字體 VScode 終端字體設置 Nerd Fonts css 14-CSS3屬性詳解：Web字體 瀏覽器指紋修改之fonts字體指紋修改 css text gradient color, css fonts gradient color 【Web前端HTML5&CSS3】12-字體 如何在移動端app中應用字體圖標icon fonts （轉） Web 性能優化：使用 CSS font-display 控制字體加載和替換 CSS | 字體系列
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM