修改网页自定义字体的CSS代码+图文教程
HI,五一玩的怎么样?除了人山人海,高速堵车,高铁全是人之外其他都还好啦,是不是,哈哈哈~~~好了,不闹了,在假期有朋友问我,想要修改网页的字体怎么办?怎么更换网页的字体,又如何引用自定义字体呢?其实很简单,今天简单写个 教程 ,需要能给小白一丢丢的帮助吧。
首页我们要引用字体文件代码,代码参考如下:
其中 @font-face 可以加载服务器端的字体到浏览器端,这样我们就可以不受客户端字体库的限制。 一般来说有四种格式的字体文件即可覆盖所有浏览器, 这四种格分别为:
.EOT :适用于Internet Explorer 4.0+。
.TTF或.OTF :适用于Firefox 3.5、Safari、Opera。
.SVG :适用于Chrome、IPhone。
.WOFF :转为web字体指定的字体格式标准,被新版本浏览器广泛支持。
确保链接正确,建议在采用的是相对路径,当然大家也可以使用绝路径。
font-family: 为字体名称,可自定义但是需要确保两次“ font-family ” 引用的名称一致才行。
PS: 获取@font-face所需字体格式,特殊字体已经在你的电脑中了,现在我们需要想办法获得@font-face所需的.eot,.woff,.ttf,.svg字体格式。要获取这些字体格式,同样需要第三方工具或者 软件 来实现,给大家推荐一个在线转换工具传送门: Font Squirrel 。
上传本地ttf格式文件,勾选“yes”转换完成点击“down”下载,然后把下载到的字体文件上传到服务器空间,引用主题路径就OK啦,下图是转换下载到本地的图片,大概就这样啊吧,我的演示文字小,所以可能不全,只需要字体文件,其他文件和css都不需要的。
OK,教程已结束,多折腾,多收获,不怕出错就怕不出错,有问题留言反馈,撤~~~
Zblog博客利用UE编辑器实现独立图片上传组件(来源可风)
优化zblog文章及列表页友好显示时间的PHP代码
参见
- 最高人民法院知识产权法庭搬迁信息化采购项目(二次)更正公告2026-10-30
- 第十八届(2026)中国国际社会公共安全产品博览会暨第三届智能与安全产业发展大会定档11月-2026年展会,北京安博会2026-10-30
- 通道式γ成像系统_2026-10-30
- 南通铭泰机床有限公司普通三辊卷板机|四辊卷板机|上辊万能式卷板机- 南通铭泰机床有限公司2026-10-30
- 行业新闻-浙江雷诺尔电气有限公司官网2026-10-30
- 德国国家科学与工程学院院士尤尔根·弗莱舍一行访温,开展产业考察与技术交流 | 展会新闻 | 2027浙江国际阀门产业链展览会 | 温州泵阀展 | 免费酒店住宿2026-10-30