css3 自定義字體_使用@font-face方式實現個性化字體

當我們在瀏覽一些網站時發現，里面含有一些十分個性的字體，這些字體並不是我們電腦上安裝的字體。那么css是如何實現自定義字體的呢？

 

在css3中可以通過@font-face模塊，把自己定義的Web字體嵌入到你的網頁，web設計師可以使用他們喜歡的任意字體，只需要把該字體文件存放到 web 服務器上，它會在需要時被自動下載到用戶的計算機上。

資源網站大全https://55wd.com

自定義字體標准格式：  

@font-face {
    font-family: 'YourWebFontName'; src: url('YourWebFontName.eot'); /* IE9 Compat Modes */ src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('YourWebFontName.woff') format('woff'), /* Modern Browsers */ url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */ url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */ [font-weight: <weight>]; [font-style: <style>]; }

說明：

Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 類型的字體。
Internet Explorer 9+ 支持新的 @font-face 規則，但是僅支持 .eot 類型的字體 (Embedded OpenType)。
注釋：Internet Explorer 8 以及更早的版本不支持新的 @font-face 規則。