Butterfly 如何优雅的改字体

本文章距离最后一次更新已经过去了 772 天，文章内容可能已经变得不可靠或者版本不适配，请谨慎阅读。

个人博客属于比较特殊类的网站，如果你需要修改字体，请务必保证你下载的字体获得授权或者可以免费使用

前言

本篇教程不涉及源码修改，可放心食用，一定要注意版权哦～～

字体下载

推荐几个免费的字体网站：

最后一个是微软的开源连体字，作为代码字体是很舒服的。

开始修改

首先创建一个 css 文件：

@font-face {
  font-family: 'CascadiaCodePL';
  font-display: swap;
  src: url('/butterflyChange/fonts/CascadiaCodePL.ttf') format("truetype");
}

url 可自行修改，可以支持放在你的 CDN 里哦，后面的 format 是必须字段，转换字体格式，font-display: swap; 可以保证我们的字体文件在没有加载完成之前文字使用默认字体，具体用法可以自行百度哦

那么如果你的字体是其他格式的呢怎么办？不用怕，这里给你提供常见的格式示例：

@font-face {
   font-family: 'webfont';
   font-display: swap;
   src: url('.eot');  
   src: url('.eot') format('embedded-opentype'),  /* IE6-IE8 */
        url('.woff2') format('woff2'),
        url('.woff') format('woff'),  /*chrome、firefox */
        url('.ttf') format('truetype'),  /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
        url('.svg') format('svg');  
}