Javascript 字體大小

| | | | | | | | | |

CSS font-size 屬性設置頁面或網站上任何文本元素的字體大小。字體大小屬性可以應用於任何包含文本內容的類、ID 或元素。該屬性接受 px、em、rem、vw、vh 和關鍵字的使用值。

大多數開發人員使用不同字體大小的組合來設置網頁樣式。例如,Web 開發人員可能將大字體用於標題,而將較小字體用於正文和其他內容。許多人想知道:如何更改 CSS 或 HTML 中的字體大小

CSS font size ? 允許開發人員設置網頁上段落或文本行的字體大小。

本教程通過示例討論如何使用 字體大小屬性。按照本指南,您將成為更改文本大小的專家。

CSS Text Size

正確的字體樣式是網頁設計的重要組成部分。無樣式的文本會導致訪問者閱讀困難,這幾乎肯定會導致在網站上的體驗不愉快。

有很多 CSS 字體樣式可用於自定義外觀文本,例如 字體粗細 , 字體家族, 裝飾文字顏色。另一個重要的屬性是字體大小,它控制一個文本塊中字體的大小

字體 CSS的大小語法如下:

sizeValue 是要用於文本塊的字體大小。有幾種方法可以指定塊使用的字體大小。 text 我們將在本文中討論的方法是:

  • 像素
  • em
  • 根em
  • 顯示單位
  • 關鍵詞

讓我們探索一個示例,說明如何在網頁中使用每種方法來調整字體大小。

使用像素調整字體大小

其中之一這設置字符大小的最常用方法是使用像素。

像素是一個很好的度量單位,因為它們可以讓您精確。像素單位很大程度上受操作系統或網絡瀏覽器的影響。一個屏幕上的像素是另一個屏幕上的像素。指定的像素值在不同的瀏覽器中看起來或多或少相同

但是,通過使用像素來設置文本塊中字體的大小是一個限制:。可訪問性。無法訪問使用幫助設置的像素字體大小,因為某些瀏覽器不允許用戶自定義字體大小。例如,視障用戶可能會發現很難使用使用像素設置字符大小的網站

假設我們創建一個網站,所有

12px 元素的所有

字體大小為 28px 我們可以使用下面的代碼來做到這一點。

在我們的代碼中我們使用了一個設置 CSS選擇器所有

的字體大小 28px 和所有

12px。以下片段顯示了這些元素在我們的新字體大小下的樣子: p>>

點擊“按鈕的圖像”執行代碼“,圓圈中的三角形”數據srcset 在右上角運行代碼 p>

在CSS中設置字體大小的另一種常用方法是使用em尺寸。測量單位em是指父級的字體大小。如果你définiss輸入一個2em的字體大小,字體大小將是父元素的兩倍。

使用ems縮放CSS字體的示例

例如,假設您存儲了一段文本在一個盒子裡。盒子的字體大小是20px。如果你已經指定文本段落字體大小是1em,那麼段落字體大小將會是20px 。它等於父元素的字體大小。

如果您沒有為父元素設置字體大小,瀏覽器將使用為該瀏覽器指定的默認值。通常是16px. By 因此,如果你沒有指定字體大小,1em def ault 16px 2em default 32px .

假設我們網頁的字體大小是16px。我們希望所有文本段落都使用此字體大小顯示,這意味著我們應該使用 1em 值。此外,我們希望我們所有的頭都顯示為 24px 的字體大小,等於 1.5em

我們可以使用以下執行此操作的代碼:

在我們的代碼中,所有段落的大小都會是16px1em = 16px默認)並且所有

元素將是 24px (1.5em = 24px)。

這就是我們的文本在網頁上的樣子:

Nell”的例子,你可以看到我們的< h1>

你應該注意到,如果我們的

出現在一個帶有不同的字體大小,我們的

的大小會改變。這是因為 em 值 ‚Äã‚Äã 從父代繼承了它們的字體大小。

使用 Root 定義字體大小em

Court root em, rem是CSS3中引入的一種新的度量單位,可以用來設置字體大小。使用rem 鏈接到根 元素 ,而不是父元素。

值,Äã,Äã 很有用,因為它們允許您指定一個相對於整個文檔的值,這樣如果父元素有另一個值em

假設你有一個默認字體大小為16px的網頁。和我們之前的例子一樣,我們都希望

出現在 24px 中,所有段落都出現在 16px 中。我們可以使用以下代碼定義這些字體大小:

我們的代碼和我們之前的例子幾乎一樣。唯一的區別是我們的使用度量單位是 rem 而不是 em。在這個例子中,我們的字體大小將始終分別為標題和頂級段落的 24px16px。這是因為我們默認的網頁字體大小是16px

使用words-key設置字體大小

key有兩種您可以使用詞來定義 CSS 中的字體大小。

絕對關鍵字用於定義無論網頁如何更改都保持不變的字體大小。可用於定義絕對字體大小的關鍵字有:

括號中的值,Äã,Äã是基於默認字體大小為16px的瀏覽器。

另一方面,相對關鍵字, 定義將根據網頁上其他地方的字體大小而改變的字體大小。您可以使用的相關關鍵字是:最小和最大。這些關鍵字很有用,因為它們允許您在頁面上其他字體大小發生變化時更改字體大小

假設我們要將一個頁面上所有

的大小設置為24px (x-large) 和所有

;18px (large)。我們可以使用以下代碼:

點擊。 圖片的按鈕“執行代碼”,圓圈中的三角形“數據srcset =” https://744025.smushcdn.com/1245953/wp-content/uploads/2020/03/iconfinder_play-circle -outline_326584 -20x20 .png los sy = 1 & 放大器? ; strip = 1 & webp = 1 20w,https://744025.smushcdn.com/1245953/wp-content/uploads/2020/03/iconfinder_play-circle-outline_326584.png?有損 = 1 & 波段 = 1 & webp = 1 24w "height="24"class="wp-image-13930"style="width: 24px; "src="https://744025.smushcdn.com/1245953/wp-content/uploads/2020/03/iconfinder_play-circle-outline_326584.png? lossy = 1 & band = 1 & webp = 1 "alt="圖像關鍵"執行代碼",圓圈中的三角形"srcset="https://744025.smushcdn.com/1245953/wp-content/上傳/ 2020/03/iconfinder_play-circle-outline_326584-20x20.png?lossy=1 & strip = 1 & webp = 1 20w,https://744025.smushcdn.com/1245953/wp-content/uploads/2020/03/iconfinder_play -circle outline_326584.p ng?有損 = 1 & 剝離 = 1 & webp = 1 24w“大小 =”。 (max -width: 24px) 100vw, 24px "> button 在上面的編輯器代碼中查看我們的HTML/CSS的輸出

我們的

分別是 24px18px。但是,我們沒有指定這些尺寸使用像素。代替這個,我們使用單詞 - 瀏覽器提供的默認字體大小鍵。

使用顯示單位設置字體大小

顯示單位計算為瀏覽器窗口大小的百分比。CSS支持的兩種顯示單位是:顯示高度(vh)和顯示寬度(vw

顯示單位是瀏覽器窗口大小的百分比,例如1VH等於窗口高度的1%。所以如果你有一個1000px的大窗口,1VH 等於 10px。

使用窗口單位很有用,因為您的字體大小會在您調整瀏覽器窗口大小時發生變化。這反過來又有助於傳遞更易於訪問的用戶體驗,適用於不同尺寸的瀏覽器和設備。

假設您要創建一個標題為窗口寬度 4% 的網站。其點為可見區域寬度的 1%。我們可以使用以下代碼:

點擊 “按鈕的圖像”執行代碼“,一個圓圈中的三角形”數據srcset

如果你調整瀏覽器的大小,這些標題的大小將會改變。

結論

字體大小屬性在 CSS(以及 HTML)中用於修改字體大小。接受多種度量單位,您可以在其中看到字體的大小,包括像素、ems、rems、關鍵字和顯示單位。它可以應用於 CSS 和 ID ,以及元素本身。

本教程展示了CSS 字體大小的基礎知識。您現在可以像專家一樣開始使用字體大小屬性了。


Shop

Learn programming in R: courses

$

Best Python online courses for 2022

$

Best laptop for Fortnite

$

Best laptop for Excel

$

Best laptop for Solidworks

$

Best laptop for Roblox

$

Best computer for crypto mining

$

Best laptop for Sims 4

$

Latest questions

NUMPYNUMPY

psycopg2: insert multiple rows with one query

12 answers

NUMPYNUMPY

How to convert Nonetype to int or string?

12 answers

NUMPYNUMPY

How to specify multiple return types using type-hints

12 answers

NUMPYNUMPY

Javascript Error: IPython is not defined in JupyterLab

12 answers


Wiki

Python OpenCV | cv2.putText () method

numpy.arctan2 () in Python

Python | os.path.realpath () method

Python OpenCV | cv2.circle () method

Python OpenCV cv2.cvtColor () method

Python - Move item to the end of the list

time.perf_counter () function in Python

Check if one list is a subset of another in Python

Python os.path.join () method