根据字体效果选择了一个清晰易读还尽可能不那么常规的可商用字体

<h1 id="heading">博客前端字体选择</h1>
一般来说，如果有一个比较不错的字体，那么可以给访问者留下不一样的印象。友链里 <a href="https://yleave.top/">Yle</a> 的字体就很好地满足了好看 + 不影响阅读两点。 
F12 查看了下对应的字体是 <a href="https://cdn.jsdelivr.net/gh/ZhongZN/ZFonts/13.woff2">https://cdn.jsdelivr.net/gh/ZhongZN/ZFonts/13.woff2</a>
简单测试了下，该字体的效果挺好的
<pre style="background-color:#fff">@font-face {
 font-family: btfFont;
 src: url(https://cdn.jsdelivr.net/gh/ZhongZN/ZFonts/13.woff2) format(&#39;woff2&#39;)
}

body {
 font-family:&#34;btfFont&#34; !important;
}
</pre><div class='image'><a href='//static.oyohyee.com/post/blog_font_hanyitangmeiren.jpg' target='_blank' rel='noopener noreferrer'><img src="//static.oyohyee.com/post/blog_font_hanyitangmeiren.jpg" alt="汉仪唐美人字体" /></a>汉仪唐美人字体</div>
该 CDN 来自于 <a href="https://zn.ax/zfonts.html">ZFonts 项目</a>，使用字体识别软件识别的结果是 <a href="http://hanyi.com.cn/productdetail?id=8240&amp;type=0">汉仪唐美人体</a>，很不幸这是一个非商用字体。 
虽然严格来说个人博客不属于商用，但是真较真也是存在隐患的
<blockquote>
（4）但是，无论如何，尽管有上面的许可，您不得将许可字库或其中的任何字体设计用于您或其他人的经营等任何商业活动中， 包括但不限于：不得对外销售或提供许可字库或其中的任何字体，无论通过何种技术方式； 不得将许可字库或其中的字体加载到您或第三方经营的产品中； 不得将许可字库中字体或单字用于企业名称、商号 、商标、包装、装潢、网页设计、广告或产品/ 服务宣传材料中；
</blockquote>
但是有了换字体的想法，就还是希望能把这个功能落地。所以针对可商用的字体进行了选择。
首先要明确目标：字体应用在博客内，博客属于高密度文字场景，难以识别的字体必然不能选择。因此常用于设计的手写体、艺术体实际上都无法使用。同时，还需要考虑由于具体的内容，繁体字库也不能考虑，因此实际上可供选择的范畴很小。
从 <a href="http://www.hellofont.cn/font-list">字由</a> 和 <a href="https://github.com/wordshub/free-font">free-font</a> 进行了对比挑选
主要有了如下选项
<ul>
<li>素材集市康康体 
<div class='image'><a href='//static.oyohyee.com/post/blog_font_sucaijishikangkangti.jpg' target='_blank' rel='noopener noreferrer'><img src="//static.oyohyee.com/post/blog_font_sucaijishikangkangti.jpg" alt="素材集市康康体" /></a>素材集市康康体</div></li>
<li>杨任东竹石体 
<div class='image'><a href='//static.oyohyee.com/post/blog_font_yangrendongzhushiti.jpg' target='_blank' rel='noopener noreferrer'><img src="//static.oyohyee.com/post/blog_font_yangrendongzhushiti.jpg" alt="杨任东竹石体" /></a>杨任东竹石体</div></li>
<li>仓耳周柯正大榜书 
<div class='image'><a href='//static.oyohyee.com/post/blog_font_cangerzhoukezhengdabangshu.jpg' target='_blank' rel='noopener noreferrer'><img src="//static.oyohyee.com/post/blog_font_cangerzhoukezhengdabangshu.jpg" alt="仓耳周柯正大榜书" /></a>仓耳周柯正大榜书</div></li>
<li>站酷快乐体 
<div class='image'><a href='//static.oyohyee.com/post/blog_font_zhankukuaileti.jpg' target='_blank' rel='noopener noreferrer'><img src="//static.oyohyee.com/post/blog_font_zhankukuaileti.jpg" alt="站酷快乐体" /></a>站酷快乐体</div></li>
<li>摄图摩登小方体 
<div class='image'><a href='//static.oyohyee.com/post/blog_font_shetumodengxiaofangti.jpg' target='_blank' rel='noopener noreferrer'><img src="//static.oyohyee.com/post/blog_font_shetumodengxiaofangti.jpg" alt="摄图摩登小方体" /></a>摄图摩登小方体</div></li>
<li>腾祥嘉丽准粗圆简 
<div class='image'><a href='//static.oyohyee.com/post/blog_font_tengxiangjializhuncuyuanjian.jpg' target='_blank' rel='noopener noreferrer'><img src="//static.oyohyee.com/post/blog_font_tengxiangjializhuncuyuanjian.jpg" alt="腾祥嘉丽准粗圆简" /></a>腾祥嘉丽准粗圆简</div></li>
</ul>
对比后，摄图摩登小方体本身汉字体验较好，但是英文不够突出，因此额外引入了英文的 Bitter 作为替换
<h2 id="license">LICENSE</h2>
<ul>
<li><a href="https://699pic.com/subject/gongyiziti.html">摄图摩登小方体</a></li>
<li><a href="https://www.fontsquirrel.com/license/bitter">Bitter</a></li>
</ul>