成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

中文字體@font-face的導(dǎo)入

番茄西紅柿 / 750人閱讀

摘要：既然中文字體很難轉(zhuǎn)換，那么還有什么方法可以解決這個(gè)問(wèn)題嗎答案是有的。進(jìn)入網(wǎng)址查找自己需要的字體，如思源黑體點(diǎn)擊免費(fèi)使用點(diǎn)擊模式輸入文字，點(diǎn)擊生成之后，就可以看到轉(zhuǎn)換為思源黑體的字了，同時(shí)我們還可以發(fā)現(xiàn)一個(gè)樣式表的地址。

由于英文字母只有26個(gè)，所以生成.eot、.woff、.ttf、.svg等文件是比較小的，也就十幾KB而已。但是對(duì)于漢字來(lái)說(shuō)，常用的漢字就已經(jīng)2500個(gè)了，生成的文件一般要2-3MB，如此龐大的包對(duì)頁(yè)面的加載時(shí)非常不利的，因此網(wǎng)絡(luò)上那些@font-face格式轉(zhuǎn)換網(wǎng)站一般都不支持中文字體格式的轉(zhuǎn)換，比如字客網(wǎng)、在線字體轉(zhuǎn)換工具等等，這些網(wǎng)站上面看似可以轉(zhuǎn)換@font-face，但其實(shí)都是欺騙感情的，太大的文件上傳不了到這個(gè)網(wǎng)站，或者是轉(zhuǎn)化出來(lái)的文件根本就沒(méi)有效果。
既然中文字體很難轉(zhuǎn)換，那么還有什么方法可以解決這個(gè)問(wèn)題嗎？答案是有的。
既然2500個(gè)字太多了，那么我們?yōu)槭裁匆欢ㄒ堰@些字體全部都轉(zhuǎn)換了呢？我們轉(zhuǎn)換我們?cè)诮缑骘@示的時(shí)候需要的文字不就可以了嗎？生成一個(gè)字體庫(kù)，比如我需要在網(wǎng)頁(yè)以“思源黑體”的字體顯示“中文字體轉(zhuǎn)換”這幾個(gè)字，那么我們就生成這幾個(gè)字的“思源黑體”字體庫(kù)，這樣就大大減小了字體包的大小了。
終于，在我的不辭辛勞之下，確認(rèn)過(guò)眼神，終于發(fā)現(xiàn)一個(gè)網(wǎng)站"有字庫(kù)"，就是這么做的。
進(jìn)入網(wǎng)址查找自己需要的字體，如“思源黑體Regular”

點(diǎn)擊免費(fèi)使用

點(diǎn)擊CSS模式

輸入文字，點(diǎn)擊生成之后，就可以看到轉(zhuǎn)換為“思源黑體Regular”的字了，同時(shí)我們還可以發(fā)現(xiàn)一個(gè)樣式表的地址。

選中這個(gè)地址然后訪問(wèn)，我們可以看到一串@font-face{}代碼，這就是我們想要的。

@font-face {
    font-family: SiYuanRegular11ee5a9d511cc1a;  /*自定義字體名稱*/
    src: url(//cdn.webfont.youziku.com/webfonts/nomal/117786/46827/5af4046ff629dd11a4d2bb8d.gif?r=74334960047);
    src: url(//cdn.webfont.youziku.com/webfonts/nomal/117786/46827/5af4046ff629dd11a4d2bb8d.gif?r=74334960047?#iefix) format(embedded-opentype),/*IE6-IE8*/
    url(//cdn.webfont.youziku.com/webfonts/nomal/117786/46827/5af4046ff629dd11a4d2bb8d.png?r=74334960047) format(woff2),
    url(//cdn.webfont.youziku.com/webfonts/nomal/117786/46827/5af4046ff629dd11a4d2bb8d.bmp?r=74334960047) format(woff),/*現(xiàn)代所有瀏覽器*/
    url(//cdn.webfont.youziku.com/webfonts/nomal/117786/46827/5af4046ff629dd11a4d2bb8d.jpg?r=74334960047) format(truetype);/*Safari、Android、iOS*/
    font-weight: normal;
    font-style: normal;
}

切記，需要在每個(gè)url里面加上http:，不然請(qǐng)求肯定錯(cuò)誤。
接下來(lái)就可以在需要的地方使用這種字體了！



文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/2272.html

相關(guān)文章

  • AT - 規(guī)則：@import，@media 和 @font-face

    摘要：規(guī)則它現(xiàn)在被廣泛用作在網(wǎng)頁(yè)中嵌入字體。支持新的規(guī)則，但是僅支持類型的字體。規(guī)則規(guī)則用來(lái)導(dǎo)入其它的文件。規(guī)則必須被放置在一個(gè)樣式表的頂部，在任何其他規(guī)則上面。規(guī)則可用于樣式應(yīng)用到一個(gè)特定的媒體，如印刷品。 font-face 規(guī)則 @font-face 它現(xiàn)在被廣泛用作在網(wǎng)頁(yè)中嵌入字體。 @font-face { font-family: font of all knowledg...

    levy9527 評(píng)論0 收藏0

  • Web字體的初探

    摘要：字體的初探一，字體基本概念的介紹字體的分類襯線體襯線在印刷的文字中襯線字體對(duì)于人眼的辨識(shí)更輕松，閱讀更舒服橫細(xì)豎粗，開(kāi)始和結(jié)束的地方有裝飾。無(wú)論是還是下，不指定網(wǎng)頁(yè)的中文字體時(shí)，默認(rèn)的就是宋體。 Web字體的初探 一，字體基本概念的介紹 1.1 字體的分類 1.1.1 Serif（襯線體） Serif（襯線）：在印刷的文字中襯線字體對(duì)于人眼的辨識(shí)更輕松，閱讀更舒服橫細(xì)豎粗，開(kāi)始和結(jié)束...

    luckyyulin 評(píng)論0 收藏0

  • ionic3開(kāi)發(fā)——記一個(gè)使用自定義icon的方法

    摘要：最近在使用和開(kāi)發(fā)一款。期間遇到如何在項(xiàng)目中使用自定義圖標(biāo)字體文件的問(wèn)題，經(jīng)過(guò)研究，找到了一個(gè)解決方法，記錄一下。然后，書寫一份文件，內(nèi)容如下字體名和路徑等等，根據(jù)需要自定義就可以了。 最近在使用ionic3和Angular開(kāi)發(fā)一款A(yù)pp。開(kāi)發(fā)體驗(yàn)還是挺好的。期間遇到如何在項(xiàng)目中使用自定義圖標(biāo)字體文件的問(wèn)題，經(jīng)過(guò)研究，找到了一個(gè)解決方法，記錄一下。 問(wèn)題描述 ionic項(xiàng)目提供了一套豐富...

    Rindia 評(píng)論0 收藏0

  • ionic3開(kāi)發(fā)——記一個(gè)使用自定義icon的方法

    摘要：最近在使用和開(kāi)發(fā)一款。期間遇到如何在項(xiàng)目中使用自定義圖標(biāo)字體文件的問(wèn)題，經(jīng)過(guò)研究，找到了一個(gè)解決方法，記錄一下。然后，書寫一份文件，內(nèi)容如下字體名和路徑等等，根據(jù)需要自定義就可以了。 最近在使用ionic3和Angular開(kāi)發(fā)一款A(yù)pp。開(kāi)發(fā)體驗(yàn)還是挺好的。期間遇到如何在項(xiàng)目中使用自定義圖標(biāo)字體文件的問(wèn)題，經(jīng)過(guò)研究，找到了一個(gè)解決方法，記錄一下。 問(wèn)題描述 ionic項(xiàng)目提供了一套豐富...

    myshell 評(píng)論0 收藏0

  • HTML與CSS中的文本個(gè)人分享

    摘要：文本標(biāo)題元素注意在一個(gè)頁(yè)面中最好只使用一個(gè)標(biāo)題因?yàn)闉g覽器只會(huì)抓取一個(gè)多了沒(méi)用示例代碼標(biāo)題元素元素默認(rèn)效果是顯示最大顯示最小默認(rèn)效果是由瀏覽器自帶樣式提供可以通過(guò)進(jìn)行修改每個(gè)標(biāo)題元素是獨(dú)占一行并且是垂直排列在實(shí)際開(kāi)發(fā)中常用的標(biāo)題元素最 文本 標(biāo)題元素 注意: 在一個(gè)HTML頁(yè)面中最好只使用一個(gè)標(biāo)題 因?yàn)闉g覽器只會(huì)抓取一個(gè)多了沒(méi)用 示例代碼: 一花一世界 一葉一孤城 娃哈哈 爽歪歪...

    MartinHan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<