利用Adobe Fonts的Webfont功能将“思源黑体”用到自己的网站上

我爱模板网在给客户做一个博客网站时，客户表示不允许使用“微软雅黑”，并列出了下面的可用字体：


这里面的字体，有的太有“书法”气息，不适合网站正文使用，有的又和微软雅黑偏差比较大，项目已经进行到后期，如果换个偏差比较大的字体，会造成比较大的偏差。思前想后，使用了比较常见的“思源黑体”。于是，下载思源黑体，得到的字体包太大，十几M，中文字体的通病。还好有Adobe Fonts。

1、进入Adobe Fonts，地址：https://fonts.adobe.com/

2、注册或登录Adobe Fonts。

3、搜索“思源黑体”


4、点击上图中的“查看系列”按钮，可以查看所有的思源黑体，点击“激活字体”就能使用此字体：


5、点击“添加到Web项目”


6、在弹出的“将字体添加到”弹窗中，新建项目名或选择项目，点击保存后，会得到一段代码：


7、将js代码放到项目文件的head中：

<script>
  (function(d) {
    var config = {
      kitId: 'azb0rgi',
      scriptTimeout: 3000,
      async: true
    },
    h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
  })(document);
</script>

8、在项目中直接使用字体，如：

p{
    font-family:source-han-sans-simplified-c, sans-serif;
}

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！