關於CSS中的字體尺寸設置

時間 2019-12-05

標籤關於 css 字體尺寸設置欄目 CSS 简体版

原文原文鏈接

我的翻譯，轉載請註明出處
英文原文：CSS Font Sizingcss

寫在前面

上一篇文章如何作好移動端的響應式設計：Viewport控制討論到了CSS像素，因而我決定研究一下如何用不一樣的方式來在CSS中設定字體大小。html

經常使用單位

在CSS中能夠用不少不一樣的方式來設定字體的尺寸。通常來講，這些單位被分紅兩大類：絕對單位(absolute)和相對單位(relative)。segmentfault

絕對單位在大多數狀況下是相對於某些實際量度而言的固定值，便是說它們一旦設定，就不會由於其餘元素的字體尺寸變化而變化。
相對單位沒有一個固定的度量值，而是由父元素尺寸來決定的相對值，它們的尺寸會根據與其相關的元素改變而改變。

下面是對這些單位的一個簡單整理：瀏覽器

單位	類型	描述
px	Absolute	1個Viewport像素
pt	Absolute	1pt = 1/72英寸
pc	Absolute	1pc = 12pt
%	Relative	相對於父元素的字體尺寸
em	Relative	相對於父元素的字體尺寸
rem	Relative	(即root em) 相對於html標籤的字體尺寸
keyword	Relative	xx-small, x-small, small, medium, large, x-large, xx-large
vw	Relative	至關於Viewport寬度的1/100
vh	Relative	至關於Viewport高度的1/100
vmin	Relative	至關於Viewport高寬中長度相對較小的1/100
vmax	Relative	至關於Viewport高寬中長度相對較大的1/100

這裏主要關注這幾個單位：px、pt、%、em、rem和vw。字體

它們之間有什麼區別？

從概念上很難理解這些單位之間的差異，因此下面用一些實例來講明。優化

例1. 默認設定

當你不設定字體尺寸時，HTML會提供一個默認的尺寸設定。大多數瀏覽器中<html>和<body>標籤中的默認字體尺寸是100%，沒有概念？看這個等式：spa

100% = 1em = 1rem = 16px = 12pt翻譯

仍是不懂？那就換個說法，好比說你給一個設置字體尺寸爲100%，給另外一個設置爲16px，在屏幕上看到的這兩個中的字體大小是同樣的，下圖列出了用幾個不一樣單位設置的字體尺寸，能夠看出是同樣大的：
設計

例2. 絕對與相對

改變<html>的字體尺寸能夠很明顯的看出絕對單位和相對單位的差異。若是把<html>設置爲html { font-size: 200% }，就會影響全部使用相對單位的。效果以下圖：

這就是相對單位最主要的優點了，藉助相對單位的這種特性就能夠設計出真正的響應式頁面，而所要作的只是修改<html>的字體尺寸code

例3. `rem`與`em`(或者`%`)

em(或者%)須要經過父元素的字體尺寸來計算尺寸：

html { 
  font-size: 100% /* =16px */
}
body {
  font-size: 2em; /* =32px */
}
p {
  font-size: 1em; /* =32px */
  /* font-size: 0.5em; =16px */
}

由於是<body>的子元素，而<body>是<html>的子元素，因此中的em和%將是以前的兩倍。

當你爲一個元素添加em單位時，應當考慮到全部父元素的字體尺寸。如你所見，這樣很容易令人混亂。
使用rem能夠很好的解決這個問題。rem只須要計算<html>的字體尺寸而不須要考慮父元素。以下代碼所示：

html { 
  font-size: 100% /* =16px */
}
body {
  font-size: 2rem; /* =32px */
}
p {
  font-size: 1rem; /* =16px */
}

使用rem可讓你擁有和em/%一樣的縮放能力，但沒必要去考慮那些複雜的嵌套關係。

例4. Viewport寬度

vw是CSS3中新提出的一個單位，經過Viewport寬度來計算字體尺寸。這樣就能夠設計出更加靈活的響應式字體。
雖然這個單位看上去很是適合用於響應式設計，但就我我的而言不是很熱衷於它。在使用vw的過程當中我並不能很好的控制字體的大小，不是太大就是過小。

個人方式

當我在寫這篇文章時，我僅使用px來做爲單位。由於如今大多數瀏覽器都容許用戶放大頁面，這樣作就不會有可訪問性的問題。
然而，我發現了這個具備必定限制力的方式。雖然個人字體尺寸在中小型屏幕上看起來還行，但在大屏幕上會被優化的更好。儘管用戶能夠自行設定放大的屬性，可是咱們但願能夠儘可能減小用戶的工做。
個人解決方案是使用rem，並使用px做爲備用單位。

html {
  font-size: 62.5%; /* sets the base font to 10px for easier math */
}

body {
  font-size: 16px;
  font-size: 1.6rem;  
  /* sets the default sizing to make sure nothing is actually 10px */
}

h1 {
  font-size: 32px;
  font-size: 3.2rem;
}

像下面這樣寫就能夠容許我按比例來放大個人字體尺寸：

@media screen and (min-width: 1280px) {
  html {
    font-size: 100%;
  }
}

這個方案之因此使用px做爲備用單位，是由於rem不支持IE8及其如下版本。這個方案有一個問題，就是像上面這樣改變基礎字體尺寸時，並不能對備用字體尺寸起到做用。不過，我不以爲這個問題多麼大，由於這個匹配大型設備尺寸的能力只不過是爲了錦上添花而已，並非一個核心功能。

若是你在這個問題上有一些更好的點子，能夠評論或私信給我。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。