:讓你的網站用上炫酷的中文字體-字體教程免费ppt模版下载-道格办公
投稿
  1. JustNews首頁
  2. 字體教程
  3. 讓你的網站用上炫酷的中文字體

讓你的網站用上炫酷的中文字體

作者: 道格資源 • • 字體教程 • 瀏覽量 996

客、設計網站、商業網站等等，都可以使用自定義字體來增加頁面的視覺吸引力和獨特性。以下是一些步驟，可以幫助你在網站中使用炫酷的中文字體。 1. 選擇合適的字體：在使用自定義字體之前，你需要選擇一款適合你網站風格的中文字體。確保該字體在不同瀏覽器和操作系統中都能正常顯示，並且具備良好的可讀性。 2. 下載字體文件：一旦你選定了中文字體，你需要下載它的字體文件。通常，字體文件擁有格式如.ttf、.otf、.woff等。 3. 將字體文件上傳到服務器：將字體文件上傳到你的網站服務器上的適當目錄中，以便在網頁中引用

點擊"閱讀原文"可以獲得更好的閱讀體驗。

前言

隨著當前Web技術的日新月異，網頁界面內容越來越豐富，讓人眼花繚亂，其中就包括了網頁中的各種自定義字體。

例如，個人博客的首頁字體：

CSS3引入的@font-face>

EOT字體是IE瀏覽器的首選格式，其他瀏覽器都不支持；其他瀏覽器更鍾愛常見的TTF、SVG、< code>WOFF。

基本語法如下：

@font-face>font-family:>src:>url(' <下載好的字體，在電腦中保存的路徑>');font-variant:>font-stretch:>font -style:>font-weight:>

例如：

@font-face>font-family:'Lora';src:> url('../fonts/STKaiti.eot');>/*IE9CompatModes*/src:>url ('../fonts/STKaiti.eot?#iefix')>format('embedded-opentype'),>/*IE6-IE8* />url('../fonts/STKaiti.woff2')>format('woff2'),> /*SuperModernBrowsers*/>url('../fonts/STKaiti.woff')>format('woff'),>/*ModernBrowsers*/>url('../fonts/STKaiti.ttf')>format('truetype '),>/*Safari,Android,iOS*/>url('../fonts/STKaiti.svg#STKaiti')>format ('svg');>/*LegacyiOS*/font-style:>font-weight: >}body>font-family:>...}

測試效果：Chrome，Firefox，IE7-IE11均可以實現

01

字體難題

自定義中文字體雖炫酷，但有一個弊端，那就是中文字體太大了，很耗費資源，具體的原因其實很簡單：英文只有26個字母，一張ASCII碼表上128個字符集幾乎可以表示任何英文語句。由於字符集小，字體文件也可以做的非常小；中文字體就完全不同，單單GB2313編碼的中文字符（含符號）就達到7445個，字符數量是ASCII< /code>>

02

解決思路

解決思路其實也很簡單，只在字庫中保留頁面中出現的文字，將其他大量不用的文字刪掉，生成一個只包含特定字符的小字體文件，便可以大大減少字體文件，從而提高訪問速度。現在思路有了，那麼有沒有現成的工具呢？

03

裁剪工具

還真有。經過我一番搜尋，找到了兩款工具：一個是華人開發的「字蛛[1]」，英文名font-spider，依賴Node.js環境，是一款命令行工具。主要思路是採集線上網頁使用到的字體，從字體文件中分離出來，完成大幅度壓縮。另一個是騰訊的大佬改版後的font-soider，叫font-spider-plus[2]。它們的工作原理如下：

我選擇使用font-spider-plus，畢竟改版過的，bug更少，功能更多，還支持線上動態渲染的頁面。唯一的不足就是官方文檔寫的太含糊了，許多人看了根本不知道怎麼用。下面我將給我一個詳細的範例，手把手教你如何使用font-spider-plus。

04

font-spider-plus使用方法

根據官方文檔，要想使用font-spider-plus，首先要在CSS文件中通過@font-face>

書寫HTML文件

首先我們新建一個文件夾用來放html文件：

$mkdirindex

然後在index目錄中創建一個index.html>

<div>class="test" >米開朗基楊</div><style>< /span>@font-face>font-family:'font';src:> url('../fonts/<font>.eot');src:>url('.. /fonts/<font>.eot?#font-spider')>format('embedded-opentype'),>url('../fonts/<font>.woff2')>format('woff2'),>url('. ./fonts/<font>.woff')>format('woff'),>url('../fonts /<font>.ttf')>format('truetype'),>url('../fonts/< font>.svg')>format('svg');font-weight:>font-style:>>>.test>font-family:'font';></style< /span>>
  • 請將<divclass="test"> </div>中的文字換成你自己的網站的文字。 你可以選擇將你的博客所有文章內容全選，然後粘貼到此處。
  • 下載你想使用的字體到fonts文件夾，然後將index.html中的<font>換成你下載的字體的前綴。

特別說明：@font-face中的src>

下面是中文字體對應的英文名稱：

新細明體：PMingLiU細明體：MingLiU標楷體：DFKai-SB黑體：SimHei宋體：SimSun新宋體：NSimSun仿宋：FangSong楷體：KaiTi仿宋_GB2312：FangSong_GB2312楷體_GB2312：KaiTi_GB2312微軟正黑體：Microsoft>微軟雅黑體：MicrosoftYaHei裝Office會多出來的一些字體：隸書：LiSu幼圓：YouYuan華文細黑：STXihei華文楷體：STKaiti華文宋體：STSong華文中宋：STZhongsong華文仿宋：STFangsong方正舒體：FZShuTi方正姚體：FZYaoti華文彩雲：STCaiyun華文琥珀：STHupo華文隸書：STLiti華文行楷：STXingkai華文新魏：STXinwei蘋果電腦中的字體：華文細黑：STHeiti>華文黑體：STHeiti華文楷體：STKaiti華文宋體：STSong華文仿宋：STFangsong麗黑>麗宋Pro：LiSongProLight標楷體：BiauKai蘋果麗中黑：Apple>蘋果麗細宋：AppleLiSungLight

壓縮本地WebFont< /span>

然後執行下面的命令來壓縮本地WebFont：

$fsp>local>

哦對了，你需要先通過npm安裝fsp命令：

$npmifont-spider-plus-g

壓縮完成後，就會在fonts目錄下生成壓縮後的字體文件：

$llfonts/total>-rw-rw-rw-1cnsgygstaff7.7K112101:08STKaiti.eot-rw-rw-rw->-rw-rw-rw-1cnsgygstaff7.6K112101:08STKaiti.ttf-rw- rw-rw->-rw-rw-rw-1cnsgygstaff3.9K112101:08STKaiti.woff2

壓縮之前的字體文件會被移到fonts目錄下的.font-spider>

$llfonts/.font-spidertotal>-rw-rw -rw-1cnsgygstaff12M112101:08STKaiti.ttf

書寫CSS

現在字體壓縮完了，怎麼應用到自己的網站中呢？也很簡單，先寫個CSS通過@font-faxe>

>/*fonts-zh.css*/@font-face>font-family:'font';src:>url('../fonts/ <font>.eot');src:>url('../fonts/<font>.eot?#font-spider' )>format('embedded-opentype'),>url('../fonts/<font>.woff2'< /span>)>format('woff2'),>url('../fonts/<font>.woff' )>format('woff'),>url('../fonts/<font>.ttf')>format ('truetype'),>url('../fonts/<font>.svg')>format('svg');font-weight:>font-style:>>

這樣還不行，你還需要將壓縮後的字體文件拷貝你的網站中，CSS中通過相對路徑要能找到這些字體文件。可我不想這麼做，太麻煩了，我還想更簡單點。

base64編碼

靈機一動，想到了base64，編碼之後可以不用拷貝這些字體文件，還能減少網站字體的加載體積，真是一箭雙雕啊！具體的步驟我就不解釋了，直接把所有步驟放到腳本中：

#!/bin/bashfont=STKaitieot=$(catfonts/>$font.eot|base64|tr-d'\n'< /span>)woff=$(catfonts/>$font.woff|base64|tr-d'\n')woff2=$(catfonts/>$font .woff2|base64|tr-d'\n')ttf=$(catfonts/>$font.ttf|base64|tr-d'\n')svg=$(catfonts/>$font.svg|base64|tr-d'\n')cat>@font-face>'$font';src:url(data:application/font-eot;charset=utf-8;base64,>$eot)format('eot');font-weight:>font -style:>}@font-face>'$font';src:url(data:application/font-woff2;charset=utf-8;base64,>$woff2)format(< span>'woff2'),url(data:application/font-woff;charset=utf-8;base64,>$woff)format('woff') ,url(data:application/font-ttf;charset=utf-8;base64,>$ttf)format('truetype'),url(data:application/font-svg ;charset=utf-8;base64,>$svg)format('svg');font-weight:>font-style:>}EOF

執行完上面的腳本後，就生成了一個fonts-zh.css，這是我們唯一需要的東西，不再需要任何額外的文件。

引入CSS

最後一步就是在你的網站中引入該CSS，具體的做法大同小異，以hugo為例，先將fonts-zh.css複製到網站主題目錄的static/css/< /code>目錄下，然後在<head></head>中引入該css，以beatifulhugo[3]主題為例，直接在layouts/partials/head_custom.html>

<link>rel="stylesheet ">href="{{"css/fonts-zh.css"|absURL >

最後讓網站的body使用該中文字體，具體的做法是修改body的css，以hugo的beatifulhugo[4]主題為例，修改static/ css/main.css>

body>font-family:>...}

可以再加上備用字體，例如：

body>font-family:>...}

表示如果STKaiti字體不可用，將使用Cambria字體。到這裡就大功告成了，具體的效果可以參考我的網站：https://fuckcloudnative.io/[5]。

05

總結

如果你沒有強迫症，到這一步就大功告成了，可我還覺得不夠簡單，那麼多步驟實在是太繁瑣了，我要讓它們全部自動化，把所有的步驟放到一個自動化腳本中。這還不夠，為了造福大眾，我在GitHUb中新建了一個倉庫，所有的腳本和步驟都在上面，有需求的小伙伴可以拿去happy啦~~

項目地址：https://github.com/yangchuansheng/font-spider-plus[6]

06

參考資料

  • 如何優雅的在網頁裡使用中文字體[7]
  • 字蛛（font-spider）讓你愛上@font-face網頁自定義字體[8]

腳註

[1]

字蛛:http://font-spider.org/

[2]

font-spider-plus:https://github.com/allanguys/font-spider-plus

[3]

beatifulhugo:https://github.com/halogenica/beautifulhugo

[4]

beatifulhugo:https://github.com/halogenica/beautifulhugo

[5]

https://fuckcloudnative.io/:https://fuckcloudnative.io/

[6]

https://github.com/yangchuansheng/font-spider-plus:https://github.com/yangchuansheng/font-spider-plus

[7]

如何優雅的在網頁裡使用中文字體:https://juejin.im/entry/59780ba6f265da6c4c501f61

[8]

字蛛（font-spider）讓你愛上@font-face網頁自定義字體:https://blog.51cto.com/dapengtalk/1854181

● 別讓自己“牆”了自己

● 徹底理解矩陣乘法

● 如何向純潔的女朋友解釋並發與並行的區別？

雲原生是一種信仰 ?

掃碼關注公眾號

後台回复◉圖譜◉領取史上最強Kubernetes知識圖譜

點擊 "閱讀原文" 獲取更好的閱讀體驗！ 

 ❤️給個「在看」，是對我最大的支持❤️

文章為用戶上傳，僅供非商業瀏覽。發布者：Lomu，轉轉請註明出處： https://www.daogebangong.com/zh-Hant/articles/detail/Let%20your%20website%20use%20cool%20Chinese%20fonts.html

贊 (810)
打賞 支付宝扫一扫 支付宝扫一扫
Lomu aaaa 專欄作者
48 196
single-end

相關推薦