搜索
查看: 4268|回复: 0

修改网站字体

[复制链接]

714

主题

354

回帖

2669

积分

管理员

本论坛第一帅

积分
2669

热心会员推广达人宣传达人突出贡献优秀版主荣誉管理论坛元老

QQ
发表于 2021-3-29 15:45:58 | 显示全部楼层 |阅读模式 来自 甘肃
[md]> 遇见自己喜欢的字体,怎样引用到自己的网站呢?这里以 `DZ` 论坛为例,当然这种方法适用所有网站。

### 获取自己喜欢的字体

![修改网站字体](https://blog.bbskali.cn/usr/uploads/2021/03/2387138843.png)
> 获取自己喜欢的字体,字体格式为 `.ttf`。我们可以到第一字体网去获取 http://www.diyiziti.com/

### 转换字体格式

将获取好的字体转换成 `.eot`、 `.woff`、 `.woff2` 三种格式,文件名可以是任意英文可以根据自己的喜好命名(不要设置为中文就可以了)。这里推荐一个在线转化的网站:https://www.fontke.com/tool/convfont/
###上传字体
将转换好的 `.eot`、 `.woff`、 `.woff2` 三种格式字体上传到自己网站任何位置(建议上传到 CDN 这样字体渲染速度比较快)。

### 调用代码

```
@font-face {
  font-family: "kali";
  src: url(https://bbskali.cn/.woff2) format("woff2"),
       url(https://bbskali.cn/.woff) format("woff"),
       url(https://bbskali.cn/.ttf) format("truetype"),
       url(https://bbskali.cn/.eot) format("embedded-opentype"),
       url(https://bbskali.cn/.svg) format("svg");
}

```

**PS:**上面的代码里 `.ttf` 和 `.svg` 的文件是没有的,但是路径要和 `.eot`、 `.woff`、 `.woff2` 三种格式路径保持一致,否则字体将不会正常显示。

```
body {  
    font-family: kali!important;  
}

```

`!important`:优先级最高!
[/md]
有志者,事竟成,破釜沉舟,百二秦关终属楚. 苦心人,天不负, 卧薪尝胆 ,三千越甲可吞吴
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表