网站首页 > 技术 正文

自定义网站字体

唐哲 2023-12-02 17:04:43 技术 1399 ℃ 0 评论

在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/

image.png

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

然后点Convert生成字体。

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

image.png

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

本文TAG:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

请填写验证码
«    2024年10月    »
123456
78910111213
14151617181920
21222324252627
28293031
搜索
网站分类
站点信息
  • 文章总数:91
  • 页面总数:1
  • 分类总数:4
  • 标签总数:19
  • 评论总数:98
  • 浏览总数:706662
控制面板
您好,欢迎到访网站!
  查看权限
唐哲 - 和仲科技