基本語法結構:
Font-size+字體大小數值+單位
單詞:font-size
語法:font-size : absolute-size | relative-size | length
取值:xx-small | x-small | small | medium | large | x-large | xx-large
xx-small:最小
x-small:較小
small:小
medium:正常(默認值),根據字體進行調整
large:大
x-large:較大
xx-large:最大
也可取具體長度單位值
可用的單位
有幾種不同的方法可以在CSS中聲明字體大小。總的來說,這些單位分為兩類——相對和絕對。 絕對單位(大多)是固定的,并且涉及到一些物理的測量。他們一旦被聲明,將不能通過改變其他元素的字體大小來改變他的大小。
相對單位沒有一個客觀的測量。相反,它們的實際大小是通過父元素的尺寸來確定的。這意味著他們的大小可以通過改變相關元素的大小來改變。
下面是一些單位的概要描述——
在這里你可以看到單位的詳細列表,但我將專注于我認為最常用的單位——px, pt, %, em, rem, 和 vw。
他們有什么區別?
這些單位之間的差異可能很難通過概念理解,所以最好的方式就是通過例子來展示他們之間的差異。
例子1——默認設置
在一個空白的HTML文檔內,你沒有任何關于字體大小的聲明而只使用默認設置。在大多數瀏覽器上為html和body標簽的默認字體大小為100%。這等同于如下算式——
這意味著如果你為一個<p>標簽設置字體大小為100%,另一個<p>為16px,他們將以相同的大小呈現在屏幕上。你可以在這里看到這個證明——
例子2——絕對單位VS相對單位
絕對和相對單位之間的差異可以通過改變html的字體大小來突出顯示。如果我們設置html{font-size:200%},這將只影響<p>用相對單位設置的字體的大小。
這是使用相對單位的一個重要優勢。有了如此輕易縮放字體大小的功能,你可以通過只改變html字體大小來創建一個真正具有響應性的網站。這里有一個很好的例子
例子3——REM VS EM(和%)
em(和%)單位是通過計算父元素的字體大小來顯示當前的字體大小。比如——
新聞熱點
疑難解答