欣益奇自媒体一个专
做自媒体运营赚钱的博客

免费送你一款无版权好看的中文字体!

思源黑体是由Google和Adobe在2015年6月16共同发表的免开源字体,支援繁体中文、简体中文、日文、韩文等字体。而Google公司将此字型另起名为Noto Sans CJK释出。随后,也在这几年推出正式的WebFont – Noto San TC,让我们不需要下载整个完整的语言档案,也能直接使用托管在Google Fonts当中的Noto Sans TC的CSS Web Font字体。

Google Fonts最早只在Early Access当中提供Noto Sans的思源黑体Beta版本,且当时还未提供CJK TC繁体,因此在当时若想要直接取用Web Font,是无法直接引用完整的Noto Sans CJK TC,而是必须要将整个字体下载,并上传至主机当中后,才能读取完整的档案。

而现在,我们终于可以直接在Google Fonts 当中,直接嵌入托管在Google Fonts 当中的Noto Sans TC 正式版字体。

今天除了要教你在网站中直接载入Google Fonts当中的Noto Sans TC字体之外,也要告诉你如何改善网站载入字体前,会预先载入Web Font的字体,让你的文字内容不会跳一下或消失再出现的情况

Noto Sans TC 使用教学

步骤一

到Google Fonts 寻找字体

为了要使用Noto Sans TC 的Web Font,我们需要先到Google Fonts 当中,找到Noto Sans TC 的字型页面。

你可以在进入Google Fonts 页面之后,在右上方的搜寻框当中输入「Noto Sans TC」找到该字体:

在Google Fonts 当中搜寻Noto Sans TC
步骤二

指定字体客制化样式

进入Noto Sans TC 字体页面之后,会显示目前字体所包含的所有字元与样式:

Noto Sans TC 在Google Web Fonts 当中的画面

往下拉一点,你可以在Google Fonts 当中的Styles 栏位当中,输入你的测试文字,来看看套用Noto Sans TC 后所显示的字体画面,同时Google Fonts 也会显示目前这个字体的字体大小为何:

在Google Fonts 中预先浏览Noto Sans TC 的字体

再继续往下拉一点,你会看到左下角能够预先选择Noto Sans TC 的Style,例如:

  • Thin
  • Light
  • Regular
  • Medium
  • Bold
  • Black

如果没有特别指定,那么字体就保留预设的Regular 就可以了:

在Google Fonts 当中,可预先选择Noto Sans TC 载入时的字体样式
步骤三

选择Noto Sans TC Web Font 字型

接下来,就要取得Noto Sans TC 的CSS 样式,因此我们回到最上方右上角的地方,点选「SELECT THIS FONT」,就能取得Embed font 的CSS 样式:

点选右上角「SELECT THIS FONT」显示Embed Font 的CSS 程式码
点选右上角「SELECT THIS FONT」显示Embed Font 的CSS 程式码
取得Embed Font CSS 程式码
取得Embed Font CSS 程式码
步骤四

客制化Noto Sans TC Web Fonts 字体

刚刚提到Google Fonts 字体可以在载入时先载入客制化的字体样式,如此可以让我们只针对指定的字体载入,而不需要载入整个Noto Sans TC 的字体,大大降低载入字体的大小:

客制化Noto Sans TC 字体,让载入时仅载入所需要的样式,降低CSS 载入大小
客制化Noto Sans TC 字体,让载入时仅载入所需要的样式,降低CSS 载入大小

最后再回到「EMBED」,取得最后所需要的CSS 样式载入连结:

取得客制化完后的CSS Embed 程式码
取得客制化完后的CSS Embed 程式码

重点提示

以往使用Google Fonts取得Noto Sans TC的Web Fonts CSS字体后,网站会无法使用font-display的功能来优化内容载入字体的效果。

最终会导致使用者在载入网站时,会有「网站内容消失,跳一下再出现」的小问题。

而现在,Google Fonts能够支援直接在载入Web Font时,直接使用display=swap来优化字体载入效果,让网站字体会更加顺畅,改善网站载入时,字体会消失、跳一下的问题。

由上述可知,以前在使用Google Fonts 取得Noto Sans TC Web Font 字体时,只能使用:

HTML

1
https://fonts.googleapis.com/css?family=Noto+Sans+TC &subset =chinese-traditional

而现在Google Fonts 开始支援直接在Web Font 当中使用Display 参数后,所取得的Web Font link 就会变成:

HTML

1
https://fonts.googleapis.com/css?family=Noto+Sans+TC &display =swap &subset =chinese-traditional

因此现在即使是载入Google Fonts的Noto Sans TC Web Font字体,也能有「font-display=swap」的效果。

赞(0) 打赏
本文由欣益奇自媒体整理来源于网络,版权归原作者所有,若有不妥之处请联系处理。!欣益奇自媒体 » 免费送你一款无版权好看的中文字体!
分享到: 更多 (0)

欣益奇自媒体|一个专做自媒体运营赚钱的博客

欣益奇自媒体

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏