关于@font-face兼容各大浏览器的问题

最新推荐文章于 2021-06-03 13:45:11 发布

杏黄的三叶草

最新推荐文章于 2021-06-03 13:45:11 发布

阅读量365

点赞数

分类专栏： Web前端CSS

本文链接：https://blog.csdn.net/dwjdj/article/details/105916332

版权

Web前端CSS 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

本文介绍了一种解决跨浏览器字体兼容性的方法，通过使用@font-face规则并提供多种字体格式，确保在不同浏览器上都能正确显示定制字体。文中详细列出了eot、woff、ttf、svg和otf等字体格式的引用方式。

摘要由CSDN通过智能技术生成

由于各大浏览器所支持的字体格式不一样，因此就要写兼容的代码

字体可以去网上下载，可以用第三方软件生成不同格式的字体。（网上搜在线字体转换即可）
代码如下

@font-face {
    font-family: "全新硬笔行书简";
    src: url("../font/全新硬笔行书简.eot");
    src: url("../font/全新硬笔行书简.eot?#iefix") format('embedded-opentype'),
         url("../font/全新硬笔行书简.woff") format('woff'),
         url("../font/全新硬笔行书简.ttf") format('truetype'),
         url("../font/全新硬笔行书简.svg"),
         url("../font/全新硬笔行书简.otf");
}