如何在react中使用自己的font

今天遇到一个需求，要在项目中使用特定的字体，因为字数较多，而且方便以后做效果，于是便采用了CSS3的@font-face规则。

1. 先看下兼容性：发现绝大部分的浏览器都已经支持

大部分浏览器已经支持


2. 接下来看看他的语法：最主要的是font-family用于指定自定义的字体名，src用于指定字体路径，其他属性可选

语法，font-family和src必选


3. 最后是在react中使用的方式：先在assets目录下放置想要使用的字体名称，接下来在index.js调用的index.css中定义font，然后就可以在全局使用了

在src中放入字体文件

在最外层的index.css中引入
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,846评论 1赞 92
  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,881评论 1赞 45
  • 在网页中插入特殊字体,浅谈@font-face
    摘要：本篇文章包括（1）介绍@font-face（2）如何在网页中使用@font-face插入特殊字体（3）中文在...
    Masukio阅读 16,609评论 0赞 17
  • 50 个便于使用的 CSS2/CSS3 代码片段
    这篇文字里我会介绍50 个便于使用的 CSS2/CSS3 代码片段给所有的WEB专业人员. 选择IDE开发环境来存...
    JamHsiao_aaa4阅读 1,324评论 0赞 3
  • 沉默在海洋里的钢琴
    每个人都会有精彩或迷茫青春。为什么是迷茫呢？因为我们可能都不知道什么时候开始或什么时候结束。那为什么是精彩呢？因...
    书立寒梅阅读 158评论 0赞 1