在 CSS 中建立響應式字型
這篇文章解釋了僅使用 CSS 實現響應式字型的方法。我們將介紹現代 CSS 和 CSS3 如何使字型在不同螢幕尺寸的裝置上看起來可讀的幾種方法。
在 CSS 中使用視口值建立響應式字型
使字型響應的最簡單方法之一是根據視口的大小或瀏覽器的視窗大小調整字型大小。CSS 提供了與瀏覽器視窗軸相關的各種視口單位，它們在製作響應式網頁時非常有用。一些視口單位是 vw、vh、vmin 和 vmax。我們可以從 CSS 單位中獲取這些單位的資訊。我們可以使用這些視口單位而不是 em、px 或 pt 來製作響應式字型。
例如，建立每個 h1、h2 和 p 標籤。在這些標籤之間寫一些你選擇的文字。在 CSS 中，將 h1、h2 和 p 標籤的 font-size 屬性分別設定為 5.9vw、3.0vh 和 2vmin。
當我們調整瀏覽器的大小時，瀏覽器的視口會發生變化，文字的字型大小也會隨之發生變化。這樣，我們就可以使用字型大小中的視口單位在 CSS 中建立響應式字型。
示例程式碼：
<h1> Hey boy </h1>
<h2> Hey girl </h2>
<p> Hey kid </p>
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
在 CSS 中使用媒體查詢建立響應式字型
我們可以使用媒體查詢在 CSS 中建立響應式字型。我們還可以利用媒體查詢來更改裝置特定高度/寬度的字型大小。我們使用@media 關鍵字來編寫媒體查詢。
例如，將 font-size 屬性設定為 3em。接下來編寫條件為 max-width:320px 的媒體查詢。然後，將 font-size 屬性設定為 2em。
示例程式碼：
body{
font-size: 3em;
}
@media only screen and (max-width: 320px) {
body {
font-size: 2em;
}
}
<h1> Hey boy </h1>
<h2> Hey girl </h2>
<p> Hey kid </p>
在這裡，當上面的程式碼被實現並在螢幕尺寸小於 320px 的裝置上執行時，字型大小會減小。對於高度低於 320px 的裝置，字型設定為 2em。對於螢幕尺寸大於 320px 的裝置，字型將為 3em。
這種方法的缺點是，如果設計開始破壞具有特定尺寸的裝置，我們可能需要新增更多媒體查詢。
在 CSS 中使用 calc() 函式建立響應式字型
由於現在大多數現代瀏覽器都支援 CSS 中的 calc() 方法，這使得編寫響應式程式碼變得更加容易。此外，這種方法也更有效，可以在不使程式碼混亂的情況下完成任務。我們可以使用 calc() 函式使字型大小響應。函式的結果是屬性的值。
例如，將 body 標籤的 font-size 屬性設定為 calc() 函式。在函式內部，寫 0.75em + 1vw。
示例程式碼：
body {
font-size: calc(0.75em + 1vw);
}
<h1> Hey boy </h1>
<h2> Hey girl </h2>
<p> Hey kid </p>
字型大小會隨著 1vw 值在不同螢幕尺寸的裝置上的變化而變化。因此，我們可以在 CSS 中建立響應式字型。
在 CSS 中使用 clamp() 函式建立響應式字型
clamp() 函式將值夾在最大值和最小值之間。該函式接受三個引數作為引數，第一個是最小值，第二個是首選值，最後一個是最大允許值。我們可以使用 clamp() 函式來設定任何屬性，例如 length、angle、percentage、number 等。我們可以使用該函式在 CSS 中製作響應式字型。
示例程式碼：
h1{
font-size : clamp(2rem, 10vw, 5rem);
}
<h1> Hey boy </h1>
<h2> Hey girl </h2>
<p> Hey kid </p>
在上面的示例中，值 2rem 是允許的最小字型大小。同樣，下一個值 10vw 是預設字型大小，最後一個值 5rem 是允許的最大字型大小。在這裡，我們需要注意中間的值應該是相對的，如 vw、ch 或 vh，而不是絕對的，如 px 和 pt。
