网站中使用自定义字体库

怪大叔9527
820 阅读3分钟

ElementPlus的官网有自己默认字体。

经过代码后，排除掉几个西文专属字体库，分析一下：

  • PingFang SC 苹方字体，苹果专属，UI设计师最喜欢的字体。如果是苹果电脑必定要渲染这个字体库
  • Hiragino Sans GB 那啥设计出中文字体，网上看了下，有一些不好的评价
  • Microsoft YaHei / 微软雅黑 windows首选，但是有过商用侵权的问题，不推荐
  • sans-serif 无衬线体（不是一个，而是一类字体，一定会存在） 同时也是最后一道防线，找不到有用的就用这个

对比分析之后，发现有一个坑的事情，上述几个字体中，多多少少都是有版本不开源的。难道elementPlus不怕纠纷吗？

赶紧看了一下官网，往下翻找。

image.png

真的是鸡贼，官网上说推荐几个不开源带版权的字体。然后自己用了一个思源黑体也就是Source Han Sans字体，这是一个开源字体，支持中文，而且UI一般都会选择这个字体作为UI稿图中苹方字体的平替。

本来是想看人怎么用的，我学着用。然后是不停地F12看代码，看source，看network，也没找到对应的字体库。

最后自己动手。

字体下载和安装

研究了一下思源黑体，首先去github官网去下载，发现字体都很大，单个woff2都有好几MB，如果要做向下兼容，使用woff格式的文件，得多要个十几MB。我一个项目打包之后也才2MB不到。

后面从iconfont上找到了下载方式，我直接选了一个Regular版本的，解压出woff和woff2文件各一个。

image.png

在aseets里新建font，再建siyuanheiti（拼音大法），将两个文件放进去。再建立一个index.css。

@font-face {
  font-family: "Source Han Sans";
  src: url('siyuanheiti.woff2?t=1720597749096') format('woff2'),
       url('siyuanheiti.woff??t=1720597749096') format('woff')
}

然后调用这个css，嫌麻烦，这里的代码也可以直接写到自己另外的css中，就可以少写一个css。

最后写入调用这个字体的方法。

body {
  font-family: PingFang SC,Source Han Sans,sans-serif;
}

写入之后发现一个问题，字重不变的话，看起来是ok的，但是如果加粗，字体就变形。

字重分配

想了一下，挑选了几个字体库，分别对应不同的字重（lighter，normal，bold，bolder）。

image.png

index.css改造如下

@font-face {
  font-family: "Source Han Sans";
  src: url('siyuanheiti-lighter/siyuanheiti.woff2?t=1720659959278') format('woff2'),
       url('siyuanheiti-lighter/siyuanheiti.woff??t=1720659959278') format('woff');
  font-weight: lighter;
}
@font-face {
  font-family: "Source Han Sans";
  src: url('siyuanheiti-normal/siyuanheiti.woff2?t=1720659959278') format('woff2'),
       url('siyuanheiti-normal/siyuanheiti.woff??t=1720659959278') format('woff');
  font-weight: normal;
}
@font-face {
  font-family: "Source Han Sans";
  src: url('siyuanheiti-bold/siyuanheiti.woff2?t=1720659959378') format('woff2'),
       url('siyuanheiti-bold/siyuanheiti.woff??t=1720659959378') format('woff');
  font-weight: bold;
}
@font-face {
  font-family: "Source Han Sans";
  src: url('siyuanheiti-bolder/siyuanheiti.woff2?t=1720659959278') format('woff2'),
       url('siyuanheiti-bolder/siyuanheiti.woff??t=1720659959278') format('woff');
  font-weight: bolder;
}

然后使用不同的字重，就可以显示不同字重正确的样式了。

同时iconfont这里下载的子集，其实只包括了预览字体的内容。意思就是说，你要所有字都显示对应的字体样式，需要把所有字都输入到预览输入框内。这里一个好处是如果对应是数字的话，体积会非常小。但是如果是显示所有中文，建议还是使用右上角的下载字体包。字体包里面包含各种格式和全部内容（中文字体库）。

比如我选择显示思源黑体的简体中文，就选择woff2。

@font-face {
  font-family: "Source Han Sans SC";
  src: url('SourceHanSansCN-VF.otf.woff2') format('woff2');
}
avatar
文章
阅读
粉丝