# font-family

## 範例碼 <a href="#code" id="code"></a>

{% tabs %}
{% tab title="css" %}
```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;
}
```
{% endtab %}

{% tab title="html" %}
```markup
<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>
```
{% endtab %}
{% endtabs %}

{% embed url="https://codepen.io/lochiwei/pen/WNjJmJg" %}

## 參考 <a href="#ref" id="ref"></a>

* :green\_book: [CSS font-family 詳細介紹](https://www.oxxostudio.tw/articles/201811/css-font-family.html)
