FontCSS：使用 iconfont 強化你的網頁體驗

使用 iconfont 是一種非常方便和流行的方式來使你的網頁看起來更美觀。通過使用 FontCSS，網站開發人員可以輕鬆地添加自定義的圖標和字體，並讓用戶無需等待字體下載過程即可享受更好的體驗。

一、FontCSS 不下載的 iconfont 不生效

FontCSS 的一個重要特性是它可以讓您使用任何第三方的 iconfont，只需要在您的網頁中直接引用相應的 CSS 文件即可。不過有時候會遇到這樣的問題：即便您正確地引用了 iconfont 的 CSS 文件，但是它依然不能正常渲染。

這個問題通常出現在一些第三方網站上，因為它們的安全策略與你的網站不兼容導致。解決方法就是添加下面的代碼到你的網站上：

<link rel="stylesheet" href="//at.alicdn.com/t/font_*.css">

其中 * 代表你的 iconfont 的編號。這段代碼的作用是使用了一個跨域的 URL 來替代你原來的地址。這樣，按照上面的方式修改後，你的網站就可以無障礙地渲染 iconfont 了。

二、FontCSS 的自由搭配

FontCSS 提供了一系列強大的自定義功能，讓你可以選擇出最合適你網站主題的字體和顏色。除此之外，FontCSS 還支持國際化語言和字體大小的調整，讓你的網站更加親民。

下面是一個調整 FontCSS 主題的例子，你可以通過修改 CSS 樣式表來達到你想要的效果：

/* 選用主題 */
@import url('https://xxxx.css');
/* 使用自定義圖標 */
.icon { font-family: 'iconfont' !important; font-size: 16px; }
/* 換顏色 */
.bg-green { background: #00cc33 }

使用 FontCSS 對文本的處理方式不僅限於上面的例子，你可以大膽嘗試各種不同的樣式和排版方法。為了獲得更好的效果，你可以在修復樣式之前先查看瀏覽器的默認字體大小，並將它們用 em 代替 px。這樣，你的網站終將能夠適應不同的屏幕和解析度，為用戶帶來最佳的體驗。

三、FontCSS 應用樣例

下面是一個簡單的例子，展示了 FontCSS 如何幫助你構建各種各樣的應用程序模式。

<!-- 載入 FontCSS 的 CSS -->
<link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<!-- 使用 FontCSS 提供的自定義圖標 -->
<i class="fa fa-users" aria-hidden="true"></i>
<!-- 使用 FontCSS 提供的自定義字體 -->
<span style="font-family:'Times New Roman',Georgia,Serif;">Hello, world!</span>

通過這個簡單的例子，你可以想像出更多更酷炫的應用程序模式，例如使用 Iconfont+SVG 實現動效組件、給圖標添加動態小箭頭等等。

最後，FontCSS 是一個非常強大和靈活的網站擴展工具，它能夠讓你的網頁更加個性化和專業化。它可以大大簡化開發人員的工作流程，並讓你的用戶享受更好的使用體驗。所以，趕快去嘗試安裝一下 FontCSS 吧！