如何在react中使用自己的font

今天遇到一個(gè)需求,要在項(xiàng)目中使用特定的字體,因?yàn)樽謹(jǐn)?shù)較多,而且方便以后做效果,于是便采用了CSS3的@font-face規(guī)則。


1. 先看下兼容性:發(fā)現(xiàn)絕大部分的瀏覽器都已經(jīng)支持

大部分瀏覽器已經(jīng)支持


2. 接下來看看他的語法:最主要的是font-family用于指定自定義的字體名,src用于指定字體路徑,其他屬性可選

語法,font-family和src必選


3. 最后是在react中使用的方式:先在assets目錄下放置想要使用的字體名稱,接下來在index.js調(diào)用的index.css中定義font,然后就可以在全局使用了

在src中放入字體文件

在最外層的index.css中引入
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,160評(píng)論 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 28,824評(píng)論 1 45
  • 摘要:本篇文章包括(1)介紹@font-face(2)如何在網(wǎng)頁中使用@font-face插入特殊字體(3)中文在...
    Masukio閱讀 16,753評(píng)論 0 17
  • 這篇文字里我會(huì)介紹50 個(gè)便于使用的 CSS2/CSS3 代碼片段給所有的WEB專業(yè)人員. 選擇IDE開發(fā)環(huán)境來存...
    JamHsiao_aaa4閱讀 1,588評(píng)論 0 3
  • 每個(gè)人都會(huì)有精彩或迷茫青春。為什么是迷茫呢?因?yàn)槲覀兛赡芏疾恢朗裁磿r(shí)候開始或什么時(shí)候結(jié)束。那為什么是精彩呢?因...
    書立寒梅閱讀 178評(píng)論 0 1

友情鏈接更多精彩內(nèi)容