css -- Web字體 · 前端知識 -- 學習整理

>[success] # Web字體通過**font-family** 屬性設置**font字體**，設置完后瀏覽器會在所在系統找到可用的字體，如果不設置會找到瀏覽器默認設置的系統字體，想設置系統額外的字體就需要第三方的字體包，整個過程 1. 如果有系統字體使用系統字體 2. 系統沒有對應字體的畫但且指定引入的字體包文件，字體包會被下載 3. 瀏覽器會根據使用的字體在下載的字體文件中查找、解析、使用對應的字體 4. 在瀏覽器中使用對應的字體顯示內容 >[danger] ##### 使用下載的字體包 * 常見的字體格式 ~~~ 1. 字體格式不同瀏覽器所支持的字體格式是不一樣的，我們有必要了解一下有關字體格式的知識。 1、TureTpe(.ttf)格式 .ttf字體是Windows和Mac的最常見的字體，是一種RAW格式，支持這種字體的瀏覽器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+； 2、OpenType(.otf)格式 .otf字體被認為是一種原始的字體格式，其內置在TureType的基礎上，支持這種字體的瀏覽器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+； 3、Web Open Font Format(.woff)格式 woff字體是Web字體中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本，同時也支持元數據包的分離，支持這種字體的瀏覽器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+； 4、Embedded Open Type(.eot)格式 .eot字體是IE專用字體，可以從TrueType創建此格式字體，支持這種字體的瀏覽器有IE4+； 5、SVG(.svg)格式 .svg字體是基于SVG字體渲染的一種格式，支持這種字體的瀏覽器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+ ~~~ * **@font-face** 用于加載一個自定義的字體 **font-family** 給引入字體資源統一起一個名字，然后在body使用 **font-family** 來注明使用的字體 * **url**指定資源的路徑，**format**用于幫助瀏覽器快速識別字體的格式; ~~~css @font-face { font-family: 'wjs'; //自定義的字體名稱 src: url('../fonts/MiFie-Web-Font.eot'); /* IE9*/ src: url('../fonts/MiFie-Web-Font.eot') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/MiFie-Web-Font.woff') format('woff'), /* chrome、firefox */ url('../fonts/MiFie-Web-Font.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('../fonts/MiFie-Web-Font.svg') format('svg'); /* iOS 4.1- */ } body{ font-family: "wjs" // 使用起名字的字體 } ~~~ >[danger] ##### 字體圖標 1. 字體可以設計成各式各樣的形狀，因此也可將一些圖標設置成字體，好處是 1.1. 放大不會失真 1.2. 可以任意切換顏色 1.3. 用到很多個圖標時，文件相對圖片較小 * 使用原理常見的字體圖標使用時候都需要先指定一個class 在指定一個圖標class 大概用法如下 ~~~ <i class="iconfont icon-xxx"></i> ~~~ 其實是先引入了字體圖標例如 ~~~ @font-face {font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg'); } ~~~ 然后指定一個class 名使用這個指定圖標字體`iconfont` ~~~css .iconfont{ font-family:"iconfont" !important; font-size:16px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale;} ~~~ 在使用偽類將對應字寫入到class 中例如 ~~~css .icon-xxx::before{ content: "\e908"; //指定顯示的內容 } ~~~ * 字體庫 [阿里字體庫](https://www.iconfont.cn/) >[danger] ##### 網站字體庫 https://www.fonts.net.cn/fonts-zh-1.html >[danger] ##### 字體庫格式轉換 https://font.qqe2.com/#