中文字型始终存在著选择较少的问题,而且因为容量大,不容易运用在网页里,因此必须搭配一些技术才能提升载入速度,试想如果访客在打开页面时必须先载入庞大字型档案,其实对于使用者来说是非常不友善的,而且也会影响到浏览体验。
时下也有很多中文网页字型(Web Font)服务,例如Typekit(现已改名为 Adobe Fonts),一样也有许多人使用的免费方案 Google Fonts ,国内的字由,或是为人所知的 justfont、文鼎的 iFontCloud 和华康字型,不同公司背后使用的技术和支援的字型数量都不太一样,当然我认为更重要的是能不能快速载入,另一个重点就放在大家关心的价格部分。
Google Fonts 早先只在 Early Access 放上思源黑体中文字型(可参考:Google Fonts 推出「思源黑体」中文网页字型,改善网页文字显示效果),最近终于宣布该字型毕业,也会移动到 Google Fonts 首页目录中!这也表示思源黑体的网页字型总算从 beta 跨越到正式版,现在使用者也能从 Google Fonts 里找到这款中文字型将它嵌入网页使用。
这么做的好处是改善中文字型在网页里的显示美感,思源黑体是 Adobe 和 Google 合作共同开发的开放原始码免费中文字型,无论在易读性或支援度方面都有目共睹,透过 Google Fonts 嵌入网站好处是速度快、完全不用额外付费,即使网站流量很大依然可免费使用这项功能。
网站名称:Noto Sans TC – Google Fonts
网站链结:https://fonts.google.com/specimen/Noto+Sans+TC
使用教学
STEP 1
开启 Google Fonts 网站后,从右侧的筛选器选择语言「Chinese(Traditional)」仅显示支援繁体中文的字型,在写这篇文章的时候只有 Noto Sans TC。如果想用简体中文的思源黑体,也可选择另一个「Chinese(Simplified)」选项,现在 Noto Sans SC 也在可用范围。
思源黑体 Noto Sans 中文网页字型上架 Google Fonts,让页面变漂亮就靠它
STEP 2
开启筛选器后找到 Noto Sans TC 也就是繁体中文的思源黑体项目。
思源黑体 Noto Sans 中文网页字型上架 Google Fonts,让页面变漂亮就靠它
STEP 3
进入字型页面,会有完整的字元预览、开发者及背景介绍,收录繁体中文中最常用的 7,800 个中文字,加入 223 个字元涵盖 Taiwan’s CNS 11643 P1 和常用国字标准字体表里的所有字元,其中也可看到这个字型在那些地区被广泛使用。
思源黑体 Noto Sans 中文网页字型上架 Google Fonts,让页面变漂亮就靠它
往下拖曳会看到 Google Fonts 思源黑体的六种样式:Thin、Light、Regular、Medium、Bold 和 Black,分别代表不同粗细,可以输入预览文字、调整不同大小看看呈现效果。
思源黑体 Noto Sans 中文网页字型上架 Google Fonts,让页面变漂亮就靠它
STEP 4
那么要如何取用 Google Fonts 提供的思源黑体网页字型呢?
进入 Noto Sans TC 页面后,点选右上角「Select This Font」选择此字型,接著就能从右下角看到该字型已经被加入你选取的清单,你可以继续选择更多其他字型,或是取得 CSS 程式码,有两种嵌入方式,可直接在 中加入载入 CSS 档案链结,或以 @import 方式载入。依照下方说明在网站现有的 CSS 文件中指定 font-family 就能看到效果。
思源黑体 Noto Sans 中文网页字型上架 Google Fonts,让页面变漂亮就靠它
不过要注意的是如果你是使用于繁体中文网站(我想会看这篇文章的应该都是),那么要到自定选项「Customize」中将 Languages 的「Chinese(Traditional)」勾选,预设情况下这个选项是没有打勾的,可能必须选取才能在中文字元上正常套用字型。此外,预设情况只会载入 Regular 字重的思源黑体,如果需要可以在这里选取其他字重,但要记得选太多就会影响网站载入速度。
思源黑体 Noto Sans 中文网页字型上架 Google Fonts,让页面变漂亮就靠它
目前思源宋体繁体中文(Noto Serif TC)还没有被列入 Google Fonts。