分類
网站

中文WebFont體驗

Webfont中文字體效果

春有百花秋有月

3.1415926535897932384626433832795028841971693993751058209749445923078164062862089986280348253421170679

這裡使用了字蛛來製作中文webfont,它的作用是可以根據需要展現的中文來製作網頁字體文件,這樣就避免了中文字體文件過大的問題。使用字蛛需要Node.js,那麼就來安裝。

CentOS安裝Node.js

由於我已經使用了epel-release庫,所以只要yum install nodejs就搞定了,如果沒有使用epel-release庫,可以通過yum install epel-release來使用。

#查看node.js版本
node --version
#通常我們都需要npm這個包管理器
yum install npm
#我用的CentOS6,默認安裝的版本太低,升級node.js我用的nvm,node版本管理器
#使用下面的命令來安裝給當前用戶(檢查下網址,畢竟是要執行的東西)
curl https://raw.githubusercontent.com/creationix/nvm/v0.13.1/install.sh | bash
#想要使用nvm還有執行下下面命令先
source ~/.bash_profile
#現在可以吃用nvm查看可以安裝的node.js版本了
nvm list-remote
#選擇需要安裝的版本,然後安裝
nvm install v5.12.0
#把5.12.0設置為默認版本
nvm alias default v5.12.0
nvm use v5.12.0

使用字蛛

字蛛的文檔寫的不夠傻瓜,我是試了幾次才成功的,說說我的方法。首先準備好需要的ttf字體文件如OCR.ttf,然後準備一個網頁html文件如下:

<!-- index.html -->
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style>
@font-face {
  font-family: 'OCR';
  src: url('font/OCR.eot');
  src:
    url('font/OCR.eot?#font-spider') format('embedded-opentype'),
    url('font/OCR.woff') format('woff'),
    url('font/OCR.ttf') format('truetype'),
    url('font/OCR.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}
p {
    font-family: 'OCR';
}
</style>
</head>
<body>
<p>這裡是需要用的字體文件的文字。</p>
</body>
</html>

我新建了一個font文件夾,這樣做出來的字體就會保存在font里而不是覆蓋同目錄下的font文件。原字體文件和html文件和font文件夾處於同一目錄中。接下來就很簡單了,安裝字蛛並執行。

#安装字蛛
npm install font-spider -g
#使用字蛛
font-spider index.html

打開font文件夾,就可以看到生成的各種webfont字體文件了。使用的方法和上面html里是一樣的,就不重複說了。

本文更新於 2022/01/28。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *