[CSS] 網頁中文字型除了微軟正黑體，還有這些好選擇！

網頁中文字型除了微軟正黑體, 還有這些好選擇！(windows)

現在大部份的瀏覽器都可以支援 @font-face 這樣的自定網頁字型功能，但是到目前為止這項技術大部份都是應用於英文的字型上，而中文的字型檔由於大小通常都很大，如果讓使用者在看網頁文字時還要再下載好幾 MB 的字型檔，通常都會讓整個網頁效率大幅下降，所以大部份的網頁中的中文字都比較少使用自定的字型。 ☞ 自製中文網頁字形（Web Font）並內崁至網頁中（使用 CSS @font-face）

套用 Google Fonts 雲端字型 ☞ Google Fonts: Early Access
1. 請搜尋網頁，關鍵字為 Chinese Traditional，即可找到中文字型
2. 目前開發的中文字型有：

• cwTeXFangSong：仿宋體
• cwTeXMing：明體
• cwTeXYen：圓體
• cwTeXKai：楷體
• cwTeXHei：黑體
• Noto Sans TC

使用方法 1

• 匯入字型 @import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);
• 使用字型 font-family: 'Noto Sans TC', sans-serif;

使用方法 2

楷體

@font-face {

/*楷體*/

  font-family: 'cwTeXKai';
  font-style: normal;
  font-weight: 500;
  src: url(//fonts.gstatic.com/ea/cwtexkai/v3/cwTeXKai-zhonly.eot);
  src: url(//fonts.gstatic.com/ea/cwtexkai/v3/cwTeXKai-zhonly.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/cwtexkai/v3/cwTeXKai-zhonly.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/cwtexkai/v3/cwTeXKai-zhonly.woff) format('woff'),
       url(//fonts.gstatic.com/ea/cwtexkai/v3/cwTeXKai-zhonly.ttf) format('truetype');
}

仿宋體

@font-face {

/*仿宋*/

  font-family: 'cwTeXFangSong';
  font-style: normal;
  font-weight: 500;
  src: url(//fonts.gstatic.com/ea/cwtexfangsong/v3/cwTeXFangSong-zhonly.eot);
  src: url(//fonts.gstatic.com/ea/cwtexfangsong/v3/cwTeXFangSong-zhonly.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/cwtexfangsong/v3/cwTeXFangSong-zhonly.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/cwtexfangsong/v3/cwTeXFangSong-zhonly.woff) format('woff'),
       url(//fonts.gstatic.com/ea/cwtexfangsong/v3/cwTeXFangSong-zhonly.ttf) format('truetype');
}

圓體

@font-face {

/*圓體*/

  font-family: 'cwTeXYen';
  font-style: normal;
  font-weight: 500;
  src: url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.eot);
  src: url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.woff) format('woff'),
       url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.ttf) format('truetype');
}

Source

☞ Google Fonts
☞ GOOGLE FONTS 提供五種中文 WENFONT，早起的鳥兒有的玩
☞ Google Fonts推出五款網頁用，雲端字型「思源黑、仿宋體、黑體、明體、圓體、楷書」