如何製作「字體預覽」的網頁功能

為什麼要學這個?

  • 使用者在還沒有下載該字體,就可以直接線上在網頁裡輸入他想看的文字套用新字體後的效果。
  • 行動裝置變多,如果想讓你的網頁裡的文字,看起來不是標準的字體,應該要學。

實作步驟

1:把字體先轉換成 .woff 格式,幸運的話,字體檔案大小會縮小到6成左右。

2:把檔案放到網路上可以被公開存取的空間。
(例如自行架設的網站或放在github上)

3:在自己的網頁裡,符用這段 HTML:

<style>
@font-face {
font-family: SweiB2LegCJKtc-Regular;
src: url(https://github.com/max32002/swei-b2-leg/raw/master/WebFont/CJK%20TC/SweiB2LegCJKtc-Regular.woff2) format(“woff2”), url(https://github.com/max32002/swei-b2-leg/raw/master/WebFont/CJK%20TC/SweiB2LegCJKtc-Regular.woff) format(“woff”);
}
.sweib2leg_textarea {
display: block;
width: calc(100% – 46px);
height: 96px;
margin: 10px;
padding: 12px;
background: #fff;
border:1px solid #333;
border-radius: 2px;
box-shadow: inset 3px 3px 3px rgba(0,0,0,0.25);
-moz-box-shadow: inset 3px 3px 3px rgba(0,0,0,0.25);
-webkit-box-shadow: inset 3px 3px 3px rgba(0,0,0,0.25);
font-size: 42px;
overflow: auto;
resize: none;
outline: none;
}
</style>
<script>
function sweib2leg_size_input_change(cnt){
var size_val = Number(document.getElementById(“sweib2leg_size_input_” + cnt).value);
document.getElementById(“sweib2leg_textarea_” + cnt).style.fontSize = size_val + “px”;
}
</script>

<p>測試效果:字體大小<input type=”number” id=”sweib2leg_size_input_0″ value=”42″ style=”width: 80px; text-align: right;” onchange=”sweib2leg_size_input_change(0);” onkeyup=”sweib2leg_size_input_change(0);”>px</p>

<textarea class=”sweib2leg_textarea” id=”sweib2leg_textarea_0″ style=”font-family: ‘SweiB2LegCJKtc-Regular'”>可以輸入文字測試效果</textarea>

附註:上面在github 上 webfont resource url 無法直接使用,會有CORS(Cross-Origin Resource Sharing)問題,解法參考:
https://stackoverflow.max-everyday.com/2020/08/cors/


執行畫面:

展示成品用網址:
https://max-everyday.com/2020/07/swei-b2-leg/

測試你的webfont 是否能被載入的線上服務:
Did that font really get loaded?
http://www.atomicjetpacks.com/project/fontdetect/how-to-detect-if-a-font-really-loaded


CSS 網頁字型

@font-face 這個 CSS 的 at-rule 可以讓網頁設計者可以使用網路上的字型檔來顯示網頁中的文字,@font-face 的基本使用方式:

@font-face {
font-family: YourFontName;
src: url(http://your-font-url/font-name.woff) format("woff");
}

有了上面的 style 後,就可以使用 font-family 屬性來指派我的網頁元件套用網路字型。

Css 寫法範例2號:

@font-face {
    font-family: "MyWebFont";
    src: url("webfont.woff2") format("woff2"), /* Super Modern Browsers */
    url("webfont.woff") format("woff"), /* Pretty Modern Browsers */
    url("webfont.ttf")  format("truetype") /* Safari, Android, iOS */
    font-weight: normal;
    font-style: normal;
}

Later on in the stylesheet:

body {
    font-family: "MyWebFont";
}

當 woff2 上 Github 後,可透過以下方式從 CDN 中引入,
可大幅加快網頁載入。jsDelivr 在速度上挺不錯的: www.cdnperf.com/#!performance,Asia 。

@font-face{
 font-family: naikai;
 src: url( https://cdn.jsdelivr.net/gh/max32002/naikaifont@770d2de358eb3eab35b4918a910cb6b06ff8e15a/webfont/NaikaiFont-Regular.woff2
) format(“woff2”);
}


MaxCodeReview 影片:
https://youtu.be/-LfZ2ka6IYI


相關網頁: