CSS

CSS 載入外部字型 / 字體

漂亮的字體可以讓增添網頁個性及可讀性,但要注意載入外部字型 / 字體則會增加網站下載的時間,這兩者的平衡則交由網頁設計師的判斷,本篇介紹如何將外部字型載入 CSS 中

CSS 載入字型 / 字體

@font-face {
  font-family: 'Helvetica';
  src: local("Helvetica"),
    url('../fonts/Helvetica.woff') format("woff"),
    url('../fonts/Helvetica.ttf') format("opentype"),
    url('../fonts/Helvetica.eot') format("embedded-opentype");
}

font-family: 定義字體的名稱 'Helvetica' ,這名稱是可以自定義的
src: 依序載入字體,而 local( "Helvetica" ),會先找使用者電腦中是否有安裝此字體,如果有則直接使用使用者的系統字體,如果使用者系統沒此字體再依序下載字體
url: 相對路徑或絕對路徑

CSS 使用已載入字型 / 字體

H1 {
  font-family: 'Helvetica';
}

字體格式 ( format ) 對照表

字型格式附檔名format() 指定方式
WOFF(Web Open Font Format).woff"woff"
TrueType.ttf"truetype"
OpenType.ttf 或 .otf"opentype"
Embedded OpenType.eot"embedded-opentype"
SVG Font.svg 或 .svgz"svg"

Refrance:
https://blog.gtwang.org/web-development/css-font-face/
https://www.iware.com.tw/qa-508.html

如果文章對您很有幫助
請我喝杯咖啡吧

Bitcoin 比特幣錢包:

38ieWXhURt27br9XrDoCeo4eruzKyi8QKs



ann71727

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料