• 使用 unicode-range ,它可分辨你是中文或英文。在套用時,就套用 font-family 名稱即可 。
    • 中文代碼 : unicode-range:U+4E00-9FFF;
    • 英文代碼 : unicode-range:U+00-024F;
.title{
    font-family:"custom Blod";
}

設計稿中,中英文不同字形設定_0

// 圖片來源 : 六角學院 ▲

使用 gulp 吃不到字體狀況解決方式

六角學院同學提供的解決辦法 ↓

主要會吃不到的原因是因為URL不對的關係 :

  • 文件結構 ( 圖一 )
  • _font.scss字體引用路徑 ( 圖二 )
  • 實際引用位置 ( 圖三 )
  • 引用成功 ( 圖四 )

同學說明 :

我原本是從 _fon.scss 開始找 font 檔案路徑,但怎麼寫都找不到,稍微查了一下好像跟 gulp 沒有關係,所以不需要去改gulp設定,除非想要壓縮字體。

實際上真正被使用的是 all.scss 所以我們寫的路徑必須從 all.scss 來看,所以從 all.scss 寫相對路近就能夠正確獲得字體了,build 後也有好好出來。

設計稿中,中英文不同字形設定_1

// 圖一 ▲

設計稿中,中英文不同字形設定_2

// 圖二 ▲

設計稿中,中英文不同字形設定_3

// 圖三 ▲

設計稿中,中英文不同字形設定_4

// 圖四 ▲

資料來源

六角學院 :

文章 :

最後修改日期: 28 12 月, 2020

作者