react中如何通过@font-face使用其它字体
·
工作的时候,用户可能不喜欢浏览器默认的字体,想要选用其它的字体,这时候我们如何去完成这个需求呢?
解决这个需求我们需要使用两个内容:
1.css中的@font-face属性
2.客户需要的字体文件
css代码如下:
@font-face {
font-family: "Aa厚底黑";/*这个是字体文件的名字,不要把.ttf加在这里*/
src: url('./assets/font/Aa厚底黑.ttf') format("truetype");
/*url表示你本地的字体文件的路径*/
/*如果你的字体文件是以.otf结尾的,format请使用("opentype"),可以在网上查找对应的关键字*/
}
然后给你需要的内容添加上样式
.h1{
font-family: "Aa厚底黑";
font-size: 36px;
}
效果图如下

更多推荐
所有评论(0)