iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 23
1
Modern Web

鉄人28号FX系列 第 23

鉄人28号FX 鉄人23号「字臉獅」@font-face

★ 地圖雷奧鎮近郊處 ↓↓↓

閱讀前,建議先前往 鉄人22号「速記豹」獲取通行資格,此為雷奧鎮近郊續文。

顯示雷奧鎮位置圖

:真納悶??
剛才問的問題和什麼通行證??

。゚(゚´ω`゚)゚。
一頭霧水??

近郊護團 [字臉獅]
等! 為何你可以擅自進入此區?

我?? (
我也莫名奇妙 )


★★★ 關卡條件 ↓↓↓

外聯字型 (@font-face)

  • 指定文本自定義字體或字體集,透過用戶端 local() 查找本地作業系統,是否已含瀏覽器所匹配字型,否則將透過遠端 url() 下載並使用該功能指定的字體資源。
  • 複合字型可經由「變數」自設命名 (custom-webfont),或指定默認字體樣式等。
  • 明確給定瀏覽器所需匹配字體資源 (字型一致),不再受限於各瀏覽器所提供預設字體。

通常 local()url() 兩者合併使用,防止在用戶端查找失敗時,來源改成遠端替代備案,確保最終執行成功。

@font-face {
  font-family: 'custom-webfont';
  src: local('Helvetica Neue'), 
       url('webfont.woff2') format('woff2'),/* Super Modern Browsers */
       url('webfont.woff') format('woff'),/* Pretty Modern Browsers */
       url('webfont.ttf') format('truetype');/* Safari, Android, iOS */
  unicode-range: U+00-024F;
  font-display: fallback;
} /* 主推薦使用 woff2, woff 字型格式,需留意支援規格。 */

body {
  font-family: 'custom-webfont', sans-serif;
}

近郊護團 [字臉獅]
原來。雖然不確定你如何取得胸前勳章。
但既然擁有通行證!!! 就一定是個能力者。

:你指冒險勳章!! 說好不哭???

接下來儘管聽著:

  • font-family
    變數名稱將會被用於 fontfont-family 屬性值 (例 font-family: <變數名稱> ;)
  • src
    指定包含字體來源位置。可以是指向遠端字體文件位置的 url(),也可以是用戶端 local() 本地系統字體的名稱。為了向瀏覽器提示字體資源為何種格式,可以在 format() 函數內包括一種格式類型。其支援格式包含:woffwoff2truetypeopentypeembedded-opentypesvg
  • font-display
    字體顯示時間線基於一個計時器,根據是否以及何時被下載,並準備確定字體的顯示方式。
  • unicode-range
    使用 Unicode 文字系統編碼範圍。目的是允許對字體資源進行分段,以便瀏覽器僅需要下載特定頁面的文本內容所需的字體資源。
    • 中日韓統一表意文字列表 (CJK Unified Ideographs)
      區段包含了 20,976 個漢字,編碼範圍為 U+4E00–9FFF。(收錄漢語與日語常用的漢字)。
    • 基本字元平面對映(Basic Multilingual Plane, BMP)
      區段編碼範圍為 U+0000U+FFFF。基本拉丁文 (包含英文),編碼範圍為 U+00-024F

註:@font-face 不能在 CSS 選擇器中聲明。以下示例不起作用。例如:

p {
  @font-face {
    font-family: 'custom-webfont';
    src: local('Helvetica Neue Bold');
  } /* 示例不起作用 */
}

外部託管技術

@import 方式

使用託管服務的好處是它可包含所有字體文件變體,確保深度跨瀏覽器兼容性,而自己無需託管所有文件。以下是使用 @importGoogle Fonts 加載 Open Sans 字體的示例:

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
body { font-family: 'Open Sans', sans-serif; }

如果打開字體的 fonts.googleapis,實際上可以看到 @font-face 幕後完成的所有工作。

<link> 方式

透過添加到 HTML 文檔中 <head> 元素內,使用 Google Fonts 相同示例:

<head> 
  <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
</head> 

↑ LUK! +23% )
↑↑ SPD! +35% )
↑↑↑ DEF! +12% )

學習了!!

⁽⁽ ◟(∗ ˊωˋ ∗)◞ ⁾⁾
開心轉身踏入城鎮街上 → → →


[ 追加經驗值 ]
註:參考來源 Unicode®字符百科
中日韓統一表意文字列表
Unicode字元平面對映
Using @font-face
CSS 設定中英文不同的字體
關於 MDN 由 Mozilla Contributors 製作,以 CC-BY-SA 2.5 釋出。


上一篇
鉄人28号FX 鉄人22号「速記豹」font properties
下一篇
鉄人28号FX 鉄人24号「影隨者」text-shadow
系列文
鉄人28号FX30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言