为网站更换字体

December 24, 2019

为网站使用自定义字体的时候发现字体文件巨大,严重拖慢了网站的加载速度。于是就在网上各种找资料,发现可以使用Fontmin-字体子集化方案进行字体压缩(同类的工具很多-因为Fontmin有客户端所以就用它了),具体原理我就不解释了。

正题开始:

使用Fontmin生成字体

下载Fontmin客户端->打开软件->将自己的字体文件拖入(只支持ttf格式)->输入文本片段->生成
fontmin-1.webp

我使用的是常用中文3500字(自己补充了英文字体和部分常用符号)

片刻之后就可以得到被压缩的字体了
fontmin-2.webp

打开样式表Taipei.cssTaipei-embed.css增加以下代码以全局引用(Taipei为字体名)

@font-face {
    font-family: "Taipei";
    src: url("Taipei.eot"); /* IE9 */
    src: url("Taipei.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    
    url("Taipei.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
    url("Taipei.woff") format("woff"), /* chrome、firefox */
    
    url("Taipei.svg#Taipei") format("svg"); /* iOS 4.1- */
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}


*{
    font-family: "Taipei";
}

其中font-display: swap;是等待字体文件今安在完之后进行文字替换,保证了网页的加载速度。
fontmin-css.webp

在网页(typecho)中引用

将得到的字体上传至服务器

打开typecho主题目录下的footer.phpheader.php引用字体样式

<!--引入字体样式-->
    <link rel="stylesheet" href="<?php $this->options->themeUrl('fonts/Taipei.css'); ?>">

fontmin-3.webp

最后刷新你的页面看下效果,如果没有改变请清除浏览器缓存后再次查看

以上。

传送门

Fontmin-字体子集化方案https://ecomfe.github.io/fontmin/#banner

台北黑体-翰字鑄造 JT Foundryhttps://sites.google.com/view/jtfoundry/zh-tw

Googlefont-https://fonts.google.com/

标签:typecho字体fontmin

最后编辑于:2020/02/20 20:15

回复