font-family

範例碼

css

/* Noto Sans TC */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC');

/* 楷體 (cwTeXKai) */
@import url('https://fonts.googleapis.com/earlyaccess/cwtexkai.css');

/* 圓體 (cwTeXYen) */
@import url('https://fonts.googleapis.com/earlyaccess/cwtexyen.css');

/* 仿宋體 (cwTeXFangSong) */
@import url('https://fonts.googleapis.com/earlyaccess/cwtexfangsong.css');

/* 明體 (cwTeXMing) */
@import url('https://fonts.googleapis.com/earlyaccess/cwtexming.css');

p {
    font-size: 2rem;
}

.noto {
    font-family: "Noto Sans TC", sans-serif;
}

.kai {
    font-family: "cwTeXKai", sans-serif;
}

.yen {
    font-family: "cwTeXYen", sans-serif;
}

.song {
    font-family: "cwTeXFangSong", sans-serif;
}

.ming {
    font-family: "cwTeXMing", sans-serif;
}

/* ⭐️ 中英文夾雜 */
/*    只要英文字體放前面、中文字體放後面就可以。 */
.mixed {
    font-family: "Times New Roman", "cwTeXFangSong", serif;
}

html

<p class="noto">
  哈囉！大家好。(Noto Sans TC)
</p>
<hr>

<p class="yen">
  哈囉！大家好。(圓體)
</p>
<hr>

<p class="kai">
  哈囉！大家好。(楷體)
</p>
<hr>

<p class="song">
  哈囉！大家好。(仿宋體)
</p>
<hr>

<p class="ming">
  哈囉！大家好。(明體)
</p>
<hr>

<p class="mixed">
  Hello！大家好。(Times New Roman + 仿宋體)
</p>
<hr>

參考

• 📗 CSS font-family 詳細介紹