microsoftyahei字體下載:前端小編原創:如何瀟灑的花式使用字體?-字體教程免费ppt模版下载-道格办公

不管你是前端狗、設計師還是切圖仔，你都繞不過搞字體這條路，雖然這條路並不是很難過，然鵝也是有一些注意事項的，請掏出小本，做好筆記：

普通地使用

人人都會的font-family

普通地引入

1	p{}/華文楷體/< /pre>

此處有普通的注意：

在不同的系統中，預裝的字體是不一樣的，所以你在mac上引用Windows上的字體，是不會正常出現的。

以下是各系統的預裝字體：

Windows操作系統
黑體：SimHei
宋體：SimSun
新宋體：NSimSun
仿宋：FangSong
楷體：KaiTi
仿宋GB2312：FangSongGB2312
楷體GB2312：KaiTiGB2312
微軟雅黑：Microsoft YaHei （Windows 7開始提供）
macOS X操作系統：
冬青黑體: Hiragino Sans GB （SNOW LEOPARD開始提供）
華文細黑：STHeiti Light （又名STXihei）
華文黑體：STHeiti
華文楷體：STKaiti
華文宋體：STSong
華文仿宋：STFangsong

下面開始花式使用~撒花~(≧▽≦)/~啦啦啦

花式使用

花式第一招：同時引入多種字體

1234	p{"Times New Roman","Microsoft YaHei", "微軟雅黑",STXihei, "華文細黑",serif;}

花式註意：

font-family的規則是：
如果找不到該種字體，或者該種字體不包括所要渲染的文字，則使用下一種字體。
如果所列出的字體，都無法滿足需要，則讓操作系統自行決定使用哪種字體。
優先使用排在前面的字體。
根據以上規則，font-family應該優先指定英文字體，然後再指定中文字體。否則，中文字體所包含的英文字母，會取代英文字體，這往往會非常的吃藕（醜）。
為了保證兼容性，中文字體的中文名稱和英文名稱，應該都寫入font-family。比如，”微軟雅黑”的英文名稱是Microsoft YaHei。
此外，中文字體的中文名稱，以及由多個單詞組成的英文名稱，應該放在雙引號內。

上面的那堆簡潔粗暴的總結一下就是：

想優先用哪個搞前面，英文字體搞前面，中英文名兒都搞上，漢字加引號，有空格加引號<(￣︶￣)↗

花式小細節：

serif和San-serif分別代表襯線體和無襯線體

花式第二招：引入自己下載到本地的字體

哦嗬嗬嗬嗬~

這裡就要開始使用你們好多人都搞不懂的@font-face啦~然鵝並沒有什麼好怕的，跟著我做就可以了~

首先先去下載一個自己喜歡的字體，參考地址：

中文字體-http://font.chinaz.com/zhongwenziti.html

英文字體-http://www.1001freefonts.com/

然後下載字體文件到本地，一般字體文件的格式有.ttf .otf .woff eot和< code>.svg,找到它們放在你的字體文件夾就可以了

例如我們的目錄結構是

├── index.html
├── css
│ └── index.css
├── font
│ └── windy.ttf

index.html

12345678

<html><head>< link rel="stylesheet" href="css/index.css"></head><body><p>today is windy.</p></body></html>< /pre>

index.css

12345678910

/*要先引入fontface*/@font -face{	/*windy可以自定義為任何名字*/	src:url('../font/windy.ttf');}/*然後再用到你想用的地方*/p{	/*用上剛才我們命名的windy*/	font-size:16px;/*然後正常設置一些其他的就好啦*/}

然後就闊以啦~

別走喲~下邊還有233333

吃瓜群眾一：我想搞百度手機版的圖標，可是審查元素都找不到在哪裡誒……

吃瓜群眾二：好多其他站的icon也是，並沒有發現圖片文件在哪裡……

吃瓜群眾三：你們啊，too young！

以下是三號吃瓜群眾的獨白，與本作者無關

吃瓜群眾三：你們知道iconfont這個東西麼？

眾吃瓜群眾：不知……

吃瓜群眾三：不知道還不趕緊去看

（於是眾人趕緊去到iconfont官網 http://www.iconfont.cn/plus）

iconfont.cn是馬雲爸爸家的UX部門推出的矢量圖標管理網站，也是國內首家推廣Webfont形式圖標的平台。

官方字體庫界面（http://iconfont.cn/collections）長這樣

另外還有很多其他公開庫可以使用

如果我們想要找某一類型的字體圖標，只要在搜索框輸入關鍵詞就可以啦

然後就粗現了很多西瓜

此時，如果只需要圖像格式的話，直接下載選擇格式就好了

但是，如果我們希望它是以字體圖標寫進html的話，就要先加入購物車裡

然後下載到本地

會有一個文件夾包含demo.html demo.css iconfont.css和四個字體文件

打開demo.html會有已經寫好的示例~

總的來說有兩種方式可以使Html頁面引入iconfont

第一種：

css

@font-face {'iconfont';src : url('iconfont.eot');/*其他兼容自行添加*/}.iconfont{font-family:"iconfont";}

html

1	<i class="iconfont"> </i>

第二種：

css

12345678

@font-face {'iconfont';src : url('iconfont.eot');/*其他兼容自行添加*/}.iconfont{font-family:"iconfont";}.icon-xigua:before { content: "\e7a3"; }

html

1	<i class="icon-xigua iconfont "></i>

藍後，你的頁面就闊以出現西瓜啦，再根據需求添加樣式吧~

貌似大家已經從三號吃瓜群眾那裡知道iconfont了，除了iconfont，常用的字體庫還有iconmoon 和bootstrap的fontawesome,它們的使用方法也同樣很簡單

以fontawesome為例

首先下載字體庫到本地

藍後將font-awesome.min.css引入你的頁面，注意路徑

<link rel="stylesheet" href= "../css/font-awesome.min.css">/*如果需要兼容的話*/<!--[if IE 7]><link rel="stylesheet" href="assets/css /font-awesome-ie7.min.css"><![endif]-->

通過應用icon-large (增大33%), icon-2x, icon-3x 或icon-4x 樣式讓圖標變得更大。

<p><i class=" icon-camera-retro icon-large"></i> icon-camera-retro</p><p><i class="icon-camera-retro icon-2x"></i> ; icon-camera-retro</p><p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p><p>< ;i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>

結果如下圖

是不是感覺很神奇呢噢嗬嗬嗬嗬嗬嗬~~~

話說這個主題真是沒完沒了啊，靠著寫字體撐起一片天……好了，主要是因為web技術發展的迅速，我們又可以用上多色字體了，多色字體顧名思義，區別於以往普通的單色icon，擁有更加生動豐富的色彩，同時又更方便控制，很是值得嚐嚐鮮的~

首先打開馬雲爸爸家的iconfont之多色字體庫,wow，果然有錢最能促進高科技了

OK,那麼其實使用起來也並不是很困難，如果你已經看過這個系列的第二篇:如何花式使用字體（二）的話，流程基本是差不多的

作為一個吃貨，我們選一個食物的多色字體庫

然後讓我們唱起來：I have a pen,I have an apple……

把Apple加到購物車，點擊頁面右上角的購物車，下載代碼

然後你會得到一個含有示例的文件夾

多色字體主要用了symbol引用這種全新的引用方式，所以我們找到demo_symbol.html文件，打開可以得到一個蘋果的多色字體引用示例

具體使用symbol引用產生多色字體方法如下：

Step1: 引入js

在<head>裡引入文件夾裡的iconfont.js

123	<head><script src=" iconfont.js"></script></head>

※注意路徑

Step2: 引入通用CSS

12345678910111213

<head><meta charset=" utf-8"/><title>多色字體吃瓜教程</title><script src="iconfont.js"></script><style type="text/css"> ;.icon {width: 1em; height: 1em;/* 改變圖標大小*/vertical-align: -0.15em;/* 垂直對齊方式*/fill: currentColor;/*圖標顏色*/overflow: hidden;/*解決溢出部分*/}</style></head>

tips:

width,height單位不限於em,可以是px,rem等
vertical-align可以是middle,baseline或數值等
默認圖標和文字相鄰時，圖標比baseline還要低(0.15em)x行高x100%
由於圖標是用svg繪製，默認採用自帶的配色，如需更改去iconfont.js裡修改path的fill即可
path 和 stroke 溢出 viewBox 部分在 IE 下會顯示，normalize.css 中也包含此句

Step3: 寫入HTML

※注意類名一致

※為了避免屏幕識讀設備抓取非故意的和可能產生混淆的輸出內容（尤其是當圖標純粹作為裝飾用途時），我們為這些圖標設置了aria-hidden=”true”，簡言之，當你用一些讀屏軟件時，不會聽到I have an apple icon這種怪東西

經過以上三步，一個引領時代潮流的多色圖標

就會展現在你的頁面上啦~快點去跟小伙伴們炫（zhuang）耀(thirteen)吧~~(≧▽≦)/~

喜歡就關注小編哦~小編有一大堆原創在肚子裡已經迫不及待要出來了233333

文章為用戶上傳，僅供非商業瀏覽。發布者：Lomu，轉轉請註明出處： https://www.daogebangong.com/zh-Hant/articles/detail/Frontend%20editors%20original%20How%20to%20use%20fonts%20chicly%20and%20fancy.html

microsoftyahei字體下載