来使用思源黑体吧!

2016-12-24

思源黑体

大概是在去年,Adobe 与合作伙伴 Google宣布推出 思源黑体。这是一款开源的具有七个字重的字体家族。 我个人非常喜欢,感觉非常利落、优雅。但是你要让我说出那里好哪里不好,我是说不出的 :P 总之,在那之后就一直想着想要给博客换上这个字体。 在一番寻找之后,发现 Adobe 自家的 Typekit 就很方便~ 下面就一起来尝试这款优雅的字体吧~

订阅 Adobe 的套餐 x 推送你的 KIT

Typekit 的实现方式应该是向他自己的服务器发送请求,之后再渲染网页中的字体。比较加载整套字体会快很多。

  1. 首先你得有一个 Adobe 的账户

  2. 接着去 Typekit 寻找这个字体

pic1

找到之后,点击左边的『WEB USE: ADD TO KIT』

pic2

然后会出现选择 KIT 的 界面。如果你没有创建过那就需要新建一个。

pic3

免费套餐只能推送到一个 KIT。一个 KIT 貌似只能用一个字体,但是一个 KIT 可以用于多个域名

pic4

接着会出现一个js的细节页面,你需要把那段js代码复制下来,稍后黏贴到所需网页的<head>标签中间。

pic5

接着回弹出一个敲定细节的窗口,你可以决定推送的字体的字重之类。决定好了之后就可以点击左边的『Use font in CSS』

pic6

等他出现『Updating …』的提示,之后就可以去网站贴js了。

Wordpress 的 header.php

我用的是博客系统是 Wordpress,并且我需要每一个页面都使用这个字体,所以我在当前主题的header.php粘贴这段代码。 pic7 之后刷新页面就可以看到效果啦。


Profile picture

rosu

An Android Developer.

GitHub Twitter icon

© 2016-2021 Powered by Gatsby