网页修改自定义字体的CSS代码图文教程

温馨提示:这篇文章已超过49天没有更新,请注意相关的内容是否还可用!

小伙伴们是否都存在一个疑问?想要修改网页的字体怎么办?怎么更换网页的字体,又如何引用自定义字体呢?其实很简单,魔改完本站部分样式之后,索性简单写个教程,给需要的新手小白一丢丢帮助吧

首先我们需要在CSS样式文件里面引入字体文件代码,参考如下CSS样式代码:

PS:字体在使用的时候注意版权问题,商用记得购买版权

@font-face {
    font-family: 'AhaoYw';
    font-display: swap;
    src: url('./font/AhaoYw.eot');
    src: url('./font/AhaoYw.eot?#iefix') format('embedded-opentype'),
         url('./font/AhaoYw.woff2') format('woff2'),
       url('./font/AhaoYw.woff') format('woff'),
       url('./font/AhaoYw.ttf') format('truetype'),
       url('./font/AhaoYw.svg') format('svg');
}

说明
@font-face 可以加载服务器端的字体
font-family: 'AhaoYw';   指定一个元素的字体名称(其中AhaoYw名称可自定义)
src: url 字体文件路径确保链接正确,建议在采用的是相对路径,当然大家也可以使用绝路径。

其中 @font-face 可以加载服务器端的字体到浏览器端,这样我们就可以不受客户端字体库的限制。一般来说有四种格式的字体文件即可覆盖所有浏览器,这四种格分别如下

字体文件格式适用于支持的浏览器
.EOTInternet Explorer 4.0+
.TTF或.OTFFirefox 3.5、Safari、Opera
.SVGChrome、IPhone
.WOFF转为web字体指定的字体格式标准,被新版本浏览器广泛支持

页面样式调用加载

font-family:为字体名称,可自定义但是需要确保两次“font-family”引用的名称一致才行。例如加载span样式

span {
    font-family:“AhaoYw”;
}

附上一张引用自定义的效果图

image.png

OK,教程已结束,记录下以免下次用到,同时也给新手小白一丢丢帮助,多折腾,多收获,不怕出错就怕不出错,有问题留言咨询反馈 ~~~

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作有参考学习价值
喜欢请点击上方【分享】,如果对您有帮助可点击上方【打赏】打赏本站。谢谢大家对阿豪运维笔记的支持。

文章作者: 阿豪运维笔记(阿豪同学)
本文链接:
文章版权:站长码字很辛苦,除非注明,否则均为阿豪运维笔记原创文章,转载或复制请以超链接形式并注明出处。

取消
微信二维码
微信二维码
支付宝二维码