Zi 字媒體
2017-07-25T20:27:27+00:00
此篇文章瀏覽量：
4,384
如果想要替網頁上的字型，載入思源黑體的話，該怎麼做呢？google 提供了 css 檔，讓我們可以載入，但有什麼問題需要加以改良的呢？
本篇文章同步於 字媒體部落格。
Google 提供的 css
notosanstc.css 是 google 提供的，也就是在 css 中，載入繁體中文思源黑體( notosanstc )的方式。
以下我直接將整個 notosanstc 這個 css 檔顯示出來：
/*
* Noto Sans TC (Chinese_traditional) http://www.google.com/fonts/earlyaccess
*/
@font-face {
font-family: 'Noto Sans TC';
font-style: normal;
font-weight: 100;
src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans TC';
font-style: normal;
font-weight: 300;
src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans TC';
font-style: normal;
font-weight: 400;
src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans TC';
font-style: normal;
font-weight: 500;
src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans TC';
font-style: normal;
font-weight: 700;
src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans TC';
font-style: normal;
font-weight: 900;
src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.otf) format('opentype');
}
所以可以在 css 檔中，直接透過以下語法來直接匯入：
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
body{
/* 先套用 Noto Sans TC 這個 思源黑體 */
font-family: 'Noto Sans TC', '微軟正黑體', sans-serif;
}
透過 font-display 來指定先顯示預設字型
這邊會有一個問題，就是載入外部字體的時候，會等到字體載完的時候，才會套用，在還沒載完字體之前，文字反而會無法出現。
要解決這個問題，就會需要告知瀏覽器：「先使用系統的預設字型，等到字體載入完成之後，再套用下載完成的字體」。那就會需要使用 font-display 這個屬性。
關於 font-display 屬性，可以套用以下四個屬性值：
auto: 此為預設值，與 block 一樣，當載入完時，文字才顯示。
block: 當文字加載完畢後，將當前的文字替換過去。
swap: 邊載入時，文字套用。
fallback: 一開始先顯示預設字型，當字型載入完畢後，再整個替換；若加載時間過長時(3秒為限)，則會以預設字型文字，則不再加載。
optional: 此模式會依照使用者的網路狀況，當網路速度太慢時，則不加載字型，以預設的字型為主。
比較偏好 fallback 的形式，所以這時就必需要將 google 提供的 css 檔下載後，再在各個 @font-face 中，加上 font-display: fallback;
所以完整的 css 檔就會變成是：
/*
* Noto Sans TC (Chinese_traditional) http://www.google.com/fonts/earlyaccess
*/
@font-face {
font-family: 'Noto Sans TC';
font-style: normal;
font-weight: 100;
src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.otf) format('opentype');
font-display: fallback;
}
@font-face {
font-family: 'Noto Sans TC';
font-style: normal;
font-weight: 300;
src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.otf) format('opentype');
font-display: fallback;
}
@font-face {
font-family: 'Noto Sans TC';
font-style: normal;
font-weight: 400;
src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.otf) format('opentype');
font-display: fallback;
}
@font-face {
font-family: 'Noto Sans TC';
font-style: normal;
font-weight: 500;
src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.otf) format('opentype');
font-display: fallback;
}
@font-face {
font-family: 'Noto Sans TC';
font-style: normal;
font-weight: 700;
src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.otf) format('opentype');
font-display: fallback;
}
@font-face {
font-family: 'Noto Sans TC';
font-style: normal;
font-weight: 900;
src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.otf) format('opentype');
font-display: fallback;
}
若覺得文章有幫助，請多分享，讓其他同好也能吸收網站技能知識。
Tweet
寫了
5860316篇文章，獲得
23313次喜歡