emfont

免費為你的文字注入靈魂

專為中文而建的免費開源 Webfont 服務

文字是網站的靈魂,是思想的表達,更是美感的載體。
然而,網頁中文字體的選擇和使用一直是個挑戰,因為檔案龐大、需要耗費大量流量,很少有免費中文字體的 webfont 服務。
emfont 的誕生正是為了填補這一空白,我們整理了許多開源免費的字體。為小型開發者和個人提供一個優秀的中文字體解決方案。

我懂你

我希望能讓你使用最簡單的方式,
花費最少的成本,
獲得最好的效果。

免費

完全免費,無需註冊。

簡單

只需一行程式碼即可完成引入。

快速

字體壓縮為 .woff,載入速度快。

智能

只載入需要的字體,節省流量。

開源

採用 Apache-2.0 授權。

使用方法

請在 HTML 中加入以下程式碼:

<script src="https://font.emtech.cc/emfont.min.js"></script>

並為需要套用字體的元素加上 emfont class。

<p class="emfont-jfopenhuninn">
    這是一個使用 emfont 的範例,這個段落使用了 jf-openhuninn-2.0 字型。
</p>

這樣字型就載入完成了,只有加上 emfont 類別的元素內的文字才會生成在字體中。你可以使用 CSS 來設定字體。

.emfont-jfopenhuninn {
                font-family: "JF Open Huninn", sans-serif;
            }

靜態載入字體

雖然使用動態載入字體的方法很簡單,且同樣文字並不會觸發重新生成檔案造成伺服器負擔,但是每次都會需要多提交一次請求。如果網站內容不常更新,可於 JS 控制台 console.log 中找到靜態字體檔案連結,直接引入到網站中,或是下載字體檔案後放到自己的伺服器上。

@font-face {
    font-family: "JF Open Huninn";
    src: url("https://font.emtech.cc/f/g6VAMcqZoW/jf-openhuninn-2.0.woff") format("woff");
}

範例

https://font.emtech.cc/example.html

線上試用

這裡可以線上試用字體,輸入任意文字即可看到效果。

字體列表

支持我們,支持開源

這個專案還在非常初期的開發階段。如果你喜歡這個項目,歡迎在 GitHub 給我們一顆星星,分享給你的朋友,或是留下你寶貴的意見。