基本語法結構：
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%。這等同於如下算式——
css code複製內容到剪貼簿
這意味著如果你為乙個
標籤設定字型大小為100%，另乙個
為16px，他們將以相同的大小呈現在螢幕上。你可以在這裡看到這個證明——
例子2——絕對單位vs相對單位
絕對和相對單位之間的差異可以通過改變html的字型大小來突出顯示。如果我們設定html，這將只影響
用相對單位設定的字型的大小。
這是使用相對單位的乙個重要優勢。有了如此輕易縮放字型大小的功能，你可以通過只改變html字型大小來建立乙個真正具有響應性的**。這裡有乙個很好的例子
例子3——rem vs em（和%）
em（和%）單位是通過計算父元素的字型大小來顯示當前的字型大小。比如——
css code複製內容到剪貼簿
因為p繼承body,body繼承html，所以我們可以計算出以em和%設定的段落字型大小變成（預設大小）兩倍。
當你為乙個元素使用em單位時，你必須考慮到所有父元素的字型大小。正如你看到的，這很容易（讓字型大小的計算）變得複雜而凌亂。
解決這個問題的便是rem。rem是基於html元素的字型大小而不是父元素。比如——
css code複製內容到剪貼簿
使用rem可以讓你擁有em和%的縮放能力而無需處理巢狀問題。
例子4——視口寬度大小
vw是css3新加入的乙個使用視口寬度來計算字型大小的單位。這樣可以允許更多的響應字型大小。
儘管這似乎是為響應式設計的乙個很有用的單位，但我個人不是它的粉絲。因為它並不能在字型大小上給我更多的控制權，他總是顯示的過大或過小。
我的方法
在我做這項研究之前，我一直使用畫素來設定我的字型大小。這是因為現在的大多數瀏覽器允許使用者在字型太小的情況下自行放大頁面，所以使用畫素並沒有什麼問題。
但是，我發現這種方式在很大程度上限制了擴充套件能力。雖然我的字型在中小螢幕上看起來不錯，但他應該在大螢幕上有更好的優化。即便使用者有放大的選項，這也不應該是我們希望他們來做的事情。
因此我使用rem設定的解決方案是(使用畫素作為備用)。
css code複製內容到剪貼簿
程式設計客棧
這樣我擴大了字型大小而只需要這樣寫——
css code複製內容到剪貼簿
這個方法是用畫素作為降級單位因為ie8及以下不支援rem。這有乙個問題是當我改變基礎字型大小時只能應用在可擴充套件性大小上面而不適用於後備字型大小。不過我不認為這是乙個巨大的問題，因為這個問題對於較大規模的裝置的核心來說只是乙個額外的問題。
如果你有任何關於如何改善這個問題的想法，請在評論裡讓我知道。我也可以寫乙個scss的混入，這樣我可以不必輸入這兩個後備和rem單位。
本文標題: css中的font-size屬性使用教程
本文位址: /web/css/83857.html
font size屬性的繼承
font size屬性不被直接繼承 只有計算值被繼承，而不是整個宣告被繼承。當使用乙個絕對字型大小值 如14px 時表現不明顯，但是使用相對字型大小值 如80 或0.8em 時就表現非常明顯。相對值只有被傳遞到子元素之前，才會被計算。如果我們在元素上設定乙個相對的font size，它僅被傳遞到子元...
CSS高階（十三）font size
line height 的數值屬性值和 百分比值屬性值都是相對於 font size ex是x字元的高度 em在 css 中，1em 的計算值等同於當前元素所在的 font size 計算值，可以將 其想象成當前元素中 如果有 漢字的高度 remroot em css3單位 ie9上支援 使用svg...
CSS中font size文字單位詳解
在用px作為文字大小的單位的時候，經常會出現一些問題。最主要是體現在使用者不能靈活的控制文字的大小，現在ieseo target blank 瀏覽器是主流，但我們不能通過seo target blank 瀏覽器設定文字大小，因為我們用px作為文字大小的單位。一 長度單位 長度單位分為兩種，一種是相對...