技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營(yíng)

贊助商

分類目錄

贊助商

最新文章

搜索

詳細(xì)介紹字體單位：em、ex、ch、rem等

作者:admin    時(shí)間:2024-8-16 9:32:52    瀏覽:

字體單位是相對(duì)測(cè)量單位，是根據(jù)其他一些值計(jì)算的，可以動(dòng)態(tài)變化。

與字體相關(guān)的測(cè)量單位有如下幾個(gè)：

單位 描述
em 元素字體大小
ex 小寫字母高度x
ch 寬度0
rem 根元素字體大小

em

對(duì)于font-size這是繼承的字體大小，對(duì)于其他屬性，它是已經(jīng)為 font-size 計(jì)算過的當(dāng)前字體大小.。

為了查看這一點(diǎn)，讓我們使用以下代碼：

body {
 /* 基本字體大小 */
 字體大?。?2px；
}

DIV {
 /* 繼承父字體并縮小一半 */
 字體大小：.5em；
}

/* 每種情況下的邊框有多厚？ */
.box-1 {
 邊框?qū)挾龋?.5em；
}
.box-2 {
 邊框?qū)挾龋?em；
}

結(jié)果這樣

 

粉色條紋是高度為1em的漸變，以便可以進(jìn)行比較。

兩個(gè)塊具有相同的字體大小，相對(duì)于父元素 (font-size: .5em; ) 縮小一半。

現(xiàn)在如何將框架厚度設(shè)置為等于字體大小？

border-width: .5em使框架比需要的薄兩倍，這是因?yàn)楦缸煮w大小僅使用font-size，而border從font-size中獲取計(jì)算值。

因此，如果某個(gè)地方當(dāng)前字體大小不需要使用font-size，則不需要復(fù)制大小值，只需指定1em。右側(cè)塊具有正確厚度的框架。

另一個(gè)了解em字體字符如何關(guān)聯(lián)的演示。彩色條的高度為1em，因此可以看到它1em大致對(duì)應(yīng)于字符的高度，考慮到大寫字母和下降字母： 

 

test.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Gradients stripes with 1em height</title>
<style>
DIV {
  --stripe-height: 1em;
  background: linear-gradient(palegreen, palegreen var(--stripe-height), transparent 0, transparent calc(var(--stripe-height) * 2), pink 0, pink calc(var(--stripe-height) * 3), transparent 0, transparent calc(var(--stripe-height) * 4), paleturquoise 0, paleturquoise calc(var(--stripe-height) * 5), transparent 0, transparent calc(var(--stripe-height) * 6));
  background-size: 100% calc(var(--stripe-height) * 6);
  line-height: 1;
  font-size: 2rem;
  text-align: center;
  outline: 1px solid #DDD;
}
DIV:nth-child(2) {
  background-position: 0 calc(var(--stripe-height) * -3);
}
DIV:nth-child(3) {
  background-position: 0 calc(var(--stripe-height) * -4);
}
DIV:nth-child(4) {
  background-position: 0 calc(var(--stripe-height) * -1);
}

BODY {
  background: white;
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(2, -webkit-max-content);
  grid-template-columns: repeat(2, max-content);
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 1rem;
}

.arial {
  font-family: Arial, sans-serif;
}

.courier {
  font-family: Courier New, monospace;
}

.georgia {
  font-family: georgia;
}

.comic-sans {
  font-family: Comic Sans MS;
}

P {
  margin: 0;
}
</style>
</head>

<body>
  <div class="arial">
  <p>Arial</p>
  <p>1234567890</p>
  <p>ABCDEFGHIJ</p>
  <p>abcdefghij</p>
</div>
<div class="georgia">
  <p>Georgia</p>
  <p>1234567890</p>
  <p>ABCDEFGHIJ</p>
  <p>abcdefghij</p>
</div>
<div class="comic-sans">
  <p>Comic Sans</p>
  <p>1234567890</p>
  <p>ABCDEFGHIJ</p>
  <p>abcdefghij</p>
</div>
<div class="courier">
  <p>Courier</p>
  <p>1234567890</p>
  <p>ABCDEFGHIJ</p>
  <p>abcdefghij</p>
</div>
</body>
</html>

execcodegetcode

大小em在任何地方都不是固定的，是在使用時(shí)根據(jù)父字體大小計(jì)算的。例如，如果這樣設(shè)置字體大?。?/p>

DIV {
  font-size: .75em;
}

然后將幾個(gè) div 嵌套在一起，下一個(gè) div 的字體大小將小于前一個(gè)：

 

test.html

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Nested em</title>
<style>
DIV {
  font-size: 0.75em;
  padding: 0.25em 1em;
  line-height: 1.5;
  text-align: center;
  outline: 1px solid #DDD;
}
DIV > DIV {
  margin-top: 0.25em;
}

BODY {
  background: white;
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(2, -webkit-min-content);
  grid-template-columns: repeat(2, min-content);
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 1rem;
  font-family: Arial, sans-serif;
  font-size: 4rem;
}
</style>
</head>
<body>
  <div>
  .75em
  <div>
    .75em
    <div>
      .75em
      <div>
        .75em
        <div>
          .75em
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

execcodegetcode

因?yàn)?code>1em是當(dāng)前繼承的字體大小，并且.75em是繼承字體縮小了四分之一。對(duì)于每個(gè)新的嵌套 div，首先繼承父級(jí)的縮小字體，然后也以指定的方式縮小。

如果想指定em重用組件的大小，需要記住這一點(diǎn)：當(dāng)元素相互嵌套時(shí)，計(jì)算出的em值可能不是你想要得到的值。 

ex

ex-是小寫字母x的高度。如果字體沒有合適的度量，瀏覽器將嘗試ex自行計(jì)算，如果由于某種原因不能這樣計(jì)算，ex則認(rèn)為等同于.5em。

在下面演示中，顏色條的高度為1ex，對(duì)于所選字體，1ex將等于小x的高度： 

 

test.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Gradients stripes with 1ex height</title>
<style>
DIV {
  --stripe-height: 1ex;
  background: linear-gradient(palegreen, palegreen var(--stripe-height), transparent 0, transparent calc(var(--stripe-height) * 2), pink 0, pink calc(var(--stripe-height) * 3), transparent 0, transparent calc(var(--stripe-height) * 4), paleturquoise 0, paleturquoise calc(var(--stripe-height) * 5), transparent 0, transparent calc(var(--stripe-height) * 6));
  background-size: 100% calc(var(--stripe-height) * 6);
  line-height: 1;
  font-size: 2rem;
  text-align: center;
  outline: 1px solid #DDD;
}
DIV:nth-child(1) {
  background-position: 0 -1.4ex;
}
DIV:nth-child(2) {
  background-position: 0 -3.1ex;
}
DIV:nth-child(3) {
  background-position: 0 -5.4ex;
}
DIV:nth-child(4) {
  background-position: 0 -7ex;
}

BODY {
  background: white;
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(2, -webkit-max-content);
  grid-template-columns: repeat(2, max-content);
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 1rem;
}

.arial {
  font-family: Arial, sans-serif;
}

.courier {
  font-family: Courier New, monospace;
}

.georgia {
  font-family: georgia;
}

.comic-sans {
  font-family: Comic Sans MS;
}

P {
  margin: 0;
}
</style>
</head>
<body>
  <div class="arial">
  <p>Arial</p>
  <p>abcdefgxxxx</p>
</div>
<div class="georgia">
  <p>Georgia</p>
  <p>abcdefgxxxx</p>
</div>
<div class="comic-sans">
  <p>Comic Sans</p>
  <p>abcdefgxxxx</p>
</div>
<div class="courier">
  <p>Courier</p>
  <p>abcdefgxxxx</p>
</div>
</body>
</html>

execcodegetcode

讓我們看看ex字體如何影響它，以及ex與em有什么關(guān)系。

在此演示中，左側(cè)組中的方塊的大小為1em，右側(cè)組中的方塊的大小為2ex，因此你可以檢查它們ex是否等于em的一半。此外，每個(gè)方塊都有自己的字體： 

 

test.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"> 
  <title>1em vs 2ex</title>
<style>
.box--em .cell {
  width: 1em;
  height: 1em;
}
.box--ex .cell {
  width: 2ex;
  height: 2ex;
}

BODY {
  background: white;
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(2, -webkit-max-content);
  grid-template-columns: repeat(2, max-content);
  align-items: center;
  justify-content: center;
  gap: 2rem;
  font-size: 80px;
  font-family: Arial, sans-serif;
}

.title {
  margin: 0;
  margin-bottom: 0.4em;
  font-size: 0.35em;
  text-align: center;
  font-weight: normal;
}

.cells {
  --gap: 1rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
  align-items: center;
  justify-content: center;
  justify-items: center;
  padding: var(--gap);
  background: linear-gradient(#DDD 1px, transparent 0, transparent var(--gap), #DDD calc(var(--gap) + 1px), #DDD calc(var(--gap) + 2px), transparent 0), linear-gradient(90deg, #DDD 1px, transparent 0, transparent var(--gap), #DDD calc(var(--gap) + 1px), #DDD calc(var(--gap) + 2px), transparent 0);
  background-position: center;
  background-size: 100% calc(var(--gap) + 2px), calc(var(--gap) + 2px) 100%;
  background-repeat: no-repeat;
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.cell::before {
  font-size: 0.18em;
}

.arial {
  background: palegreen;
  font-family: Arial, sans-serif;
}
.arial::before {
  content: "Arial";
  line-height: 1;
}

.courier {
  background: pink;
  font-family: Courier New, monospace;
}
.courier::before {
  content: "Courier";
}

.georgia {
  background: paleturquoise;
  font-family: Georgia;
}
.georgia::before {
  content: "Georgia";
}

.comic-sans {
  background: palegoldenrod;
  font-family: Comic Sans MS;
}
.comic-sans::before {
  content: "Comic Sans";
}
</style>
</head>
<body>
  <div class="box box--em">
  <h2 class="title">1em</h2>
  
  <div class="cells">
    <div class="cell arial"></div>
    <div class="cell georgia"></div>
    <div class="cell comic-sans"></div>
    <div class="cell courier"></div>
  </div>
</div>

<div class="box box--ex">
  <h2 class="title">2ex</h2>
  
  <div class="cells">
    <div class="cell arial"></div>
    <div class="cell georgia"></div>
    <div class="cell comic-sans"></div>
    <div class="cell courier"></div>
  </div>
</div>
</body>
</html>

execcodegetcode

與em不同的是，ex大小會(huì)隨字體而變化，并且在所有情況下2ex都不等于1em，即不能依賴.5中的比例。

ex就像em，它繼承父級(jí)的字體大?。?nbsp;

 

test.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Nested ex</title>
<style>
DIV {
  font-size: 0.9ex;
  padding: 0 0.5ex 0.25ex;
  line-height: 1.3;
  text-align: center;
  outline: 1px solid #DDD;
}
DIV > DIV {
  margin-top: 0.25ex;
}

BODY {
  background: white;
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(2, -webkit-min-content);
  grid-template-columns: repeat(2, min-content);
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 1rem;
  font-family: Arial, sans-serif;
  font-size: 10rem;
}
</style>
</head>
<body>
  <div>
  .9ex
  <div>
    .9ex
    <div>
      .9ex
      <div>
        .9ex
      </div>
    </div>
  </div>
</div>
</body>
</html>

execcodegetcode

ch

ch— 字符寬度0。對(duì)于等寬字體，這是任何字符的精確寬度；對(duì)于其他字體，這是一個(gè)窄字符的近似寬度。如果由于某種原因無法計(jì)算寬度，則后備值將為.5em。

警告不要嘗試使用ch字符來設(shè)置容器的寬度，因?yàn)樗荒馨搭A(yù)期工作。在下面的演示中，每個(gè)文本塊的寬度設(shè)置如下： 

DIV {
  width: 10ch;
}

塊寬度僅適用于等寬字體，在某些字體中它適用于數(shù)字（Arial, Comic Sans），在其他情況下不能期望它1ch等于字符寬度：

 

test.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Unit ch</title>
<style>
DIV {
  width: 10ch;
  --stripe-width: 1ch;
  background: linear-gradient(90deg, palegreen, palegreen var(--stripe-width), transparent 0, transparent calc(var(--stripe-width) * 2), pink 0, pink calc(var(--stripe-width) * 3), transparent 0, transparent calc(var(--stripe-width) * 4), paleturquoise 0, paleturquoise calc(var(--stripe-width) * 5), transparent 0, transparent calc(var(--stripe-width) * 6));
  background-size: calc(var(--stripe-width) * 6) 100%;
  line-height: 1.2;
  font-size: 1.8rem;
  text-align: center;
  outline: 1px solid #DDD;
}
DIV:nth-child(1) {
  background-position: 0 -1.4ex;
}
DIV:nth-child(2) {
  background-position: 0 -3.1ex;
}
DIV:nth-child(3) {
  background-position: 0 -5.4ex;
}
DIV:nth-child(4) {
  background-position: 0 -7ex;
}

BODY {
  background: white;
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(2, -webkit-max-content);
  grid-template-columns: repeat(2, max-content);
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 2rem;
}

.arial {
  font-family: Arial, sans-serif;
}

.courier {
  font-family: Courier New, monospace;
}

.georgia {
  font-family: georgia;
}

.comic-sans {
  font-family: Comic Sans MS;
}

P {
  margin: 0;
}
</style>
</head>
<body>
  <div class="arial">
  <p>Arial</p>
  <p>1234567890</p>
  <p>ABCDEFGHIJ</p>
  <p>abcdefghij</p>
</div>
<div class="georgia">
  <p>Georgia</p>
  <p>1234567890</p>
  <p>ABCDEFGHIJ</p>
  <p>abcdefghij</p>
</div>
<div class="comic-sans">
  <p>Comic Sans</p>
  <p>1234567890</p>
  <p>ABCDEFGHIJ</p>
  <p>abcdefghij</p>
</div>
<div class="courier">
  <p>Courier</p>
  <p>1234567890</p>
  <p>ABCDEFGHIJ</p>
  <p>abcdefghij</p>
</div>
</body>
</html>

execcodegetcode

我們來比較1em、2ex和2ch：

 

test.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>1em vs 2ex vs 2ch</title>
<style>
.box--em .cell {
  width: 1em;
  height: 1em;
}
.box--ex .cell {
  width: 2ex;
  height: 2ex;
}
.box--ch .cell {
  width: 2ch;
  height: 2ch;
}

BODY {
  background: white;
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(3, -webkit-max-content);
  grid-template-columns: repeat(3, max-content);
  align-items: center;
  justify-content: center;
  gap: 2rem;
  font-size: 70px;
  font-family: Arial, sans-serif;
}

.title {
  margin: 0;
  margin-bottom: 0.4em;
  font-size: 0.35em;
  text-align: center;
  font-weight: normal;
}

.cells {
  --gap: 1rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
  align-items: center;
  justify-content: center;
  justify-items: center;
  padding: var(--gap);
  background: linear-gradient(#DDD 1px, transparent 0, transparent var(--gap), #DDD calc(var(--gap) + 1px), #DDD calc(var(--gap) + 2px), transparent 0), linear-gradient(90deg, #DDD 1px, transparent 0, transparent var(--gap), #DDD calc(var(--gap) + 1px), #DDD calc(var(--gap) + 2px), transparent 0);
  background-position: center;
  background-size: 100% calc(var(--gap) + 2px), calc(var(--gap) + 2px) 100%;
  background-repeat: no-repeat;
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.cell::before {
  font-size: 0.18em;
}

.arial {
  background: palegreen;
  font-family: Arial, sans-serif;
}
.arial::before {
  content: "Arial";
  line-height: 1;
}

.courier {
  background: pink;
  font-family: Courier New, monospace;
}
.courier::before {
  content: "Courier";
}

.georgia {
  background: paleturquoise;
  font-family: Georgia;
}
.georgia::before {
  content: "Georgia";
}

.comic-sans {
  background: palegoldenrod;
  font-family: Comic Sans MS;
}
.comic-sans::before {
  content: "Comic Sans";
}
</style>
</head>

<body>
  <div class="box box--em">
  <h2 class="title">1em</h2>
  
  <div class="cells">
    <div class="cell arial"></div>
    <div class="cell georgia"></div>
    <div class="cell comic-sans"></div>
    <div class="cell courier"></div>
  </div>
</div>

<div class="box box--ex">
  <h2 class="title">2ex</h2>
  
  <div class="cells">
    <div class="cell arial"></div>
    <div class="cell georgia"></div>
    <div class="cell comic-sans"></div>
    <div class="cell courier"></div>
  </div>
</div>

<div class="box box--ch">
  <h2 class="title">2ch</h2>
  
  <div class="cells">
    <div class="cell arial"></div>
    <div class="cell georgia"></div>
    <div class="cell comic-sans"></div>
    <div class="cell courier"></div>
  </div>
</div>
</body>
</html>

execcodegetcode

顯然：

  • 1ch更大1ex（寬度0大于高度x）；
  • 1ch不等于em一半；
  • ch可能會(huì)隨字體而變化。 

rem

rem是root em根元素的字體大小；對(duì)于網(wǎng)頁(yè)來說，這是 element html。默認(rèn)字體大小為16px，該值在規(guī)范中并不固定，但被所有瀏覽器使用。

如果用戶在瀏覽器設(shè)置中設(shè)置不同的值，它將覆蓋根元素的字體大小。也就是說，如果你需要制作一個(gè)會(huì)縮放到用戶選擇的字體大小的界面，那么使用rem。

重要的是要了解rem大小只能針對(duì)html，例如，采用以下樣式： 

BODY {
  font-size: 24px;
}

DIV {
  font-size: 1rem;
}

如果rem可以覆蓋任何地方，文本就會(huì)增加，但這并沒有發(fā)生：

 

test.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Try to override rem in body</title>
<style>
HTML {
  font-size: 16px;
}

BODY {
  font-size: 24px;
}

DIV {
  font-size: 1rem;
}

BODY {
  background: white;
  min-height: 100vh;
  display: grid;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
}

P {
  margin: 0;
  text-align: center;
}

DIV {
  --stripe-height: 24px;
  background: linear-gradient(palegreen, palegreen var(--stripe-height), transparent 0, transparent calc(var(--stripe-height) * 2), pink 0, pink calc(var(--stripe-height) * 3), transparent 0, transparent calc(var(--stripe-height) * 4), paleturquoise 0, paleturquoise calc(var(--stripe-height) * 5), transparent 0, transparent calc(var(--stripe-height) * 6));
  background-size: 100% calc(var(--stripe-height) * 6);
  line-height: 1;
  outline: 1px solid #DDD;
}
</style>

</head>
<body>
  <div>
  <p>1234567890</p>
  <p>ABCDEFGHIJ</p>
  <p>abcdefghij</p>
</div>

</body>
</html>

execcodegetcode

顏色條的高度24px，以便有東西可以比較。

如果覆蓋元素html的字體大小，一切都會(huì)正常： 

HTML {
  font-size: 24px;
}

DIV {
  font-size: 1rem;
}

 

test.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Change html font-size</title>
<style>
HTML {
  font-size: 24px;
}

DIV {
  font-size: 1rem;
}

BODY {
  background: white;
  min-height: 100vh;
  display: grid;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
}

DIV {
  --stripe-height: 24px;
  background: linear-gradient(palegreen, palegreen var(--stripe-height), transparent 0, transparent calc(var(--stripe-height) * 2), pink 0, pink calc(var(--stripe-height) * 3), transparent 0, transparent calc(var(--stripe-height) * 4), paleturquoise 0, paleturquoise calc(var(--stripe-height) * 5), transparent 0, transparent calc(var(--stripe-height) * 6));
  background-size: 100% calc(var(--stripe-height) * 6);
  line-height: 1;
  outline: 1px solid #DDD;
}

P {
  margin: 0;
  text-align: center;
}
</style>

</head>
<body>
  <div>
  <p>1234567890</p>
  <p>ABCDEFGHIJ</p>
  <p>abcdefghij</p>
</div>
</body>
</html>

execcodegetcode

與em不同的是，rem它始終僅包含根元素的字體大小，因此嵌套不會(huì)影響任何內(nèi)容：

 

test.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Nested rem</title>
<style>
HTML {
  font-size: 24px;
}

DIV {
  font-size: 0.9rem;
  padding: 0.25rem 0.5rem;
  line-height: 1.3;
  text-align: center;
  outline: 1px solid #DDD;
}
DIV > DIV {
  margin-top: 0.25rem;
}

BODY {
  background: white;
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(2, -webkit-min-content);
  grid-template-columns: repeat(2, min-content);
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 1rem;
  font-family: Arial, sans-serif;
  font-size: 10rem;
}
</style>
</head>
<body>
  <div>
  .9rem
  <div>
    .9rem
    <div>
      .9rem
      <div>
        .9rem
      </div>
    </div>
  </div>
</div>
</body>
</html>

execcodegetcode

這允許你制作尺寸與基本字體大小相關(guān)的組件，但不依賴于彼此之間的元素嵌套。

總結(jié)

本文詳細(xì)介紹字體單位：em、ex、ch、rem等，通過本文的學(xué)習(xí)，你應(yīng)該對(duì)字體單位有了更加充分的了解。

x
  • 站長(zhǎng)推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */