google fonts 國內使用解決方案

因爲衆所周知的緣由，國內使用google font庫有很大的問題。

解決方案1：使用國內鏡像如360網站衛士經常使用前端公共庫CDN服務

• 優勢：使用方便

• 缺點：目標用戶包含國外的開發者，不清楚國外用戶的加載速度

解決方案2：提供另一種解決方案，能夠自主決定資源下載源，自主配置cdn等服務。

1. 在google fonts 官網上選擇字體並獲取css連接，以下

<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

1. 將連接內容下載到本地保存，打開，內容以下：

/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), 
       local('Oswald-Regular'), 
       url(https://fonts.gstatic.com/s/oswald/v10/pEobIV_lL25TKBpqVI_a2w.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* 以下可能還有更多代碼，但結構是和上面的同樣的 */

1. 將 @font-face 下 src屬性下 url 處的文件下載到本地並保存，並將 url 地址修改爲本地地址

2. 引用修改後的本地google fonts css文件,就能夠使用了。

參考資料：

• https://www.zhihu.com/question/19578734

• https://www.google.com/fonts/