★ 地圖雷奧鎮近郊處 ↓↓↓
閱讀前，建議先前往 鉄人22号「速記豹」獲取通行資格，此為雷奧鎮近郊續文。
顯示雷奧鎮位置圖
：真納悶？？
剛才問的問題和什麼通行證？？
｡ﾟ(ﾟ´ω`ﾟ)ﾟ｡
一頭霧水？？
近郊護團 [字臉獅]：
等！ 為何你可以擅自進入此區？
我？？ (
我也莫名奇妙 )
★★★ 關卡條件 ↓↓↓
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 或 font-family 屬性值 (例 font-family: <變數名稱> ;)url()，也可以是用戶端 local() 本地系統字體的名稱。為了向瀏覽器提示字體資源為何種格式，可以在 format() 函數內包括一種格式類型。其支援格式包含：woff，woff2，truetype，opentype，embedded-opentype 和 svg。Unicode 文字系統編碼範圍。目的是允許對字體資源進行分段，以便瀏覽器僅需要下載特定頁面的文本內容所需的字體資源。
20,976 個漢字，編碼範圍為 U+4E00–9FFF。(收錄漢語與日語常用的漢字)。U+0000 至 U+FFFF。基本拉丁文 (包含英文)，編碼範圍為 U+00-024F。註：@font-face 不能在 CSS 選擇器中聲明。以下示例不起作用。例如：
p {
@font-face {
font-family: 'custom-webfont';
src: local('Helvetica Neue Bold');
} /* 示例不起作用 */
}
@import 方式：
使用託管服務的好處是它可包含所有字體文件變體，確保深度跨瀏覽器兼容性，而自己無需託管所有文件。以下是使用 @import 從 Google 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 釋出。
iThome鐵人賽
看影片追技術