自定义网站字体

在css里顶部加上如下代码：

@font-face {
    font-family: 'DingTalk JinBuTi';
    src: url('DingTalk-JinBuTi.eot');
    src: url('DingTalk-JinBuTi.eot?#iefix') format('embedded-opentype'),
        url('DingTalk-JinBuTi.woff2') format('woff2'),
        url('DingTalk-JinBuTi.woff') format('woff'),
        url('DingTalk-JinBuTi.ttf') format('truetype'),
        url('DingTalk-JinBuTi.svg#DingTalk-JinBuTi') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

当然，也可创建一个css文件，然后在主css中加载这个文件：

@import "styleFo.css";

在调用字体的地方，修改成：

font-family:'DingTalk JinBuTi';

一般上面的字体设置代码加到css的body{}里就可以了。

生成字体格式的网站：https://transfonter.org/

Add fonts上传字体，然后选择格式，一般TTF,WOFF,SVG,EOT,WOFF2全都选择就可以。

然后点Convert生成字体。

生成的字体文件中已经包含了一个css文件，直接复制这个css文件中的@font-face部分就可以了。

有时候会出现这样的情况，如果修改@font-face里面的font-family的字体名字，那么调用这个修改后的字体不能正常显示字体样式，所以建议这里面的字体名字不要动，下面的url是可以随便修改的。

本文TAG：web服务器