如何使用字蛛

時間 2019-11-17

標籤如何用字简体版

原文原文鏈接

學習如何使用字蛛，請直接閱讀第三章css

1、瞭解字體

1.標準字體：

Windows

微軟雅黑體：Microsoft YaHeihtml

黑體：SimHeigit

宋體：SimSungithub

新宋體：NSimSunweb

仿宋：FangSongnpm

楷體：KaiTi瀏覽器

MacOS

冬青黑體：Hiragino Sans GBbash

華文黑體：STHeiti網絡

華文細黑：STHeiti Lightide

華文宋體：STSong

華文仿宋：STFangsong

華文楷體：STKaiti

因爲系統緣由，部分字體可能沒法正確顯示

能夠看出，這些字體仍是比較常規的。

若是咱們須要在項目使用特殊一點的字體，該怎麼辦呢？

答案就是使用第三方字體。

2.第三方字體

使用第三方字體，以 dafont 上的 Pokemon 字體爲例

下載並解壓後獲得

上圖所示，爲兩個 .ttf 字體格式的文件。

包括 .ttf 在內，還有其餘多種字體格式：

TrueType (.ttf)

Windows 和 Mac 系統最經常使用的字體格式，其最大的特色就是它是由一種數學模式來進行定義的基於輪廓技術的字體，這使得它們比基於矢量的字體更容易處理，保證了屏幕與打印輸出的一致性。同時，這類字體和矢量字體同樣能夠隨意縮放、旋轉而沒必要擔憂會出現鋸齒。

OpenType (.otf)

OpenType 是一種可縮放字型（scalable font）電腦字體類型，採用 PostScript格式，是美國微軟公司與Adobe 公司聯合開發，用來替代 TrueType 字型的新字型。這類字體的文件擴展名爲.otf，類型代碼是 OTTO。

Embedded Open Type (.eot)

嵌入字體格式（EOT）是微軟開發的一種技術，容許 OpenType 字體嵌入到網頁並能夠下載至瀏覽器渲染。這些文件只在當前頁活動的狀態下，臨時安裝在用戶的系統中。

Web Open Font Format (.woff)

相對於 TrueType 和 OpenType ，WOFF（Web開發字體格式）是一種專門爲了 Web 而設計的字體格式標準，它並不複雜，實際上只是對於 TrueType / OpenType 等字體格式的封裝，並針對網絡使用加以優化：每一個字體文件中含有字體以及針對字體的元數據（ Metadata ），字體文件被壓縮，以便於網絡傳輸，而且不包含任何加密或者 DRM 措施。

這麼多字體帶來的問題是瀏覽器的支持：目前現代瀏覽器基本都支持 .ttf 、 .otf 、 .woff 的字體格式。但須要注意的是 IE8如下僅支持 .eot 格式。

第三方字體已經有了，那麼要如何在web項目中使用呢？

2、使用字體

1.瞭解 @font-face

@font-face {
  [ font-family: <family-name>; ] ||
  [ src: <src>; ] ||
  [ unicode-range: <unicode-range>; ] ||
  [ font-variant: <font-variant>; ] ||
  [ font-feature-settings: <font-feature-settings>; ] ||
  [ font-variation-settings: <font-variation-settings>; ] ||
  [ font-stretch: <font-stretch>; ] ||
  [ font-weight: <font-weight>; ] ||
  [ font-style: <font-style>; ]
}
複製代碼

@font-face 是一個CSS的 @規則，它容許網頁開發者爲其網頁指定在線字體。經過這種做者自備字體的方式， @font-face 能夠消除對用戶電腦字體的依賴。

font-family 所指定的字體名字將會被用於 font 或 font-family 屬性。

src 遠程字體文件位置的URL或者用戶計算機上的字體名稱，可使用local語法經過名稱指定用戶的本地計算機上的字體。若是找不到該字體，將會嘗試其餘來源，直到找到它。

2.使用 @font-face

新建項目 font-face ，目錄結構以下

在 font 目錄下，放入字體文件
編輯 index.css

@font-face {
  font-family: 'PokemonHollow';
  src: url('../font/Pokemon\ Hollow.ttf');
}

@font-face {
  font-family: 'PokemonSolid';
  src: url('../font/Pokemon\ Solid.ttf');
}

div {
  font-size: 50px;
  text-align: center;
}

.p1 {
  font-family: 'PokemonHollow';
}

.p2 {
  font-family: 'PokemonSolid';
}
複製代碼

編輯 index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./assets/style/index.css">
  <title>Document</title>
</head>
<body>
  <div>stay hungry stay foolish</div>
  <div class="p1">stay hungry stay foolish</div>
  <div class="p2">stay hungry stay foolish</div>
</body>
</html>
複製代碼

在瀏覽器中打開 index.html

如今我已經學會如何使用自定義字體了

嗎？

很遺憾，並無。

爲何？

由於咱們博大精深的中華文化，造就了龐大的中文字庫，引入一個完整的中文字庫，會佔用大量資源，下降頁面性能，影響用戶體驗。

那麼，就沒有既能使用炫酷的字體，又能保證頁面性能的方法嗎？

有，固然有！

那你卻是說啊！！

font-spider 字蛛！！！

3、字蛛

1.瞭解字蛛

字蛛是一個智能 WebFont 壓縮工具，它能自動分析出頁面使用的 WebFont 並進行按需壓縮。

字蛛官網

特性

壓縮字體：智能刪除沒有被使用的字形數據，大幅度減小字體體積
生成字體：支持 woff二、woff、eot、svg 字體格式生成

2.使用字蛛

安裝字蛛

npm install font-spider -g
複製代碼

下載中文字體，以漢儀新蒂芳草體爲例
在 static 目錄下，放入 .ttf 字體文件
在 static 目錄下，新建 font.css
在根目錄下，新建 font.html
編輯 font.css

@font-face {
  font-family: 'HanyiSentyMeadow';
  src: url('../font/HanyiSentyMeadow.eot');
  src:
    url('../font/HanyiSentyMeadow.eot?#font-spider') format('embedded-opentype'),
    url('../font/HanyiSentyMeadow.woff2') format('woff2'),
    url('../font/HanyiSentyMeadow.woff') format('woff'),
    url('../font/HanyiSentyMeadow.ttf') format('truetype'),
    url('../font/HanyiSentyMeadow.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

li {
  font-family: 'HanyiSentyMeadow';
}
複製代碼

特別說明： @font-face 中的 src 定義的 .ttf 文件必須存在，其他的格式將由工具自動生成

編輯 font.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./static/style/font.css">
  <title>Document</title>
</head>
<body>
  <ul>
    <li>芝加哥公牛</li>
    <li>克里夫蘭騎士</li>
    <li>底特律活塞</li>
    <li>印第安納步行者</li>
    <li>密爾沃基雄鹿</li>
  </ul>
</body>
</html>
複製代碼