css下载的字体怎么覆盖

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS下载的字体怎么覆盖呢?@font-face { font-family: 'MyFont'; src: url('myfont.eot'); src: u

CSS下载的字体怎么覆盖呢?

@font-face {
    font-family: 'MyFont';
    src: url('myfont.eot');
    src: url('myfont.eot?#iefix') format('embedded-opentype'),
         url('myfont.woff2') format('woff2'),
         url('myfont.woff') format('woff'),
         url('myfont.ttf') format('truetype'),
         url('myfont.svg#svgfontname') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'MyFont', Arial, sans-serif;
} 

步骤解析:

1. 在CSS文件中使用@font-face规则定义字体,其中font-family为定义的字体名称,src为字体文件的链接地址。

2. 在src中按字体文件格式的支持程度降序排列字体文件链接地址,最后一个链接地址为“SVG”格式字体文件链接。
注:为了在IE6-8浏览器中不出错,需要在eot链接后添加一个“#iefix”参数。

3. 确认font-weightfont-style是否正确设置成了字体文件提供的相应属性。

4. 正确引入字体:将定义的字体名称写入选择器的font-family属性中,如果字体文件链接有问题,指定的字体无法正常显示,页面会回退到备选字体如Arial等。

总之,按照这些步骤正确引入自定义字体,就可以改变Web页面的字体风格了。希望这篇文章对你有所帮助!

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css下载的字体怎么覆盖

粉丝

0

关注

0

收藏

0

已有0次打赏