技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营
卡卡网是专业的网站测速平台，网速测试，测试网站速度，就来卡卡网 ~
问题反馈网络日志

●【DiyVM】沙田机房/香港云/回国CN2线路/AMD EPYC/39元一月●5M/CN2海外云主机 24元/月●BGP+CN2海外云 低至25元/月●海外主机 低至$2/月

DiyVM：香港VPS惊爆价36元一月
★站长/主播变现★有流量就来
5M CN2 GIA云主机 24元起
一一一云主机 26元起一一一
官方高价收量，每日稳定结算

一一云主机 24元 3折起一一
海外CN2云 低至$2.5/月
海外云低至2折 298/年
免费测试★APK免杀 谷歌过保护
官方收量CPA/CPS长期稳定

海外主机 5M CN2 低至$2/月
恒创科技 一 海外服务器 ● 高速稳定
★解决安装报毒★谷歌过保护机制
超级签★免杀★加固★满意付款
全球云主机 3天试用再买

【菠萝云】香港4G内存99元,马上开通
亿人互联-津/京BGP托管租用/VPS
苹果签名/APP封装/远控免杀
10M CN2海外云VPS 53元/月
CN2 GIA/1000Mbps $111/月

实力产品变现
实力产品变现
实力产品变现
实力产品变现
实力产品变现

赞助商

分类目录

赞助商

最新文章
详细介绍字体单位：em、ex、ch、rem等
字体单位是相对测量单位，是根据其他一些值计算的，可以动态变化。与字体相关的测量单...
11个示例详细介绍SVG stroke形状属性及如何用其制作动画
stroke-width设置形状的描边粗细，如果在 HTML 中，框架是从外边缘...
9款用SVG蒙版制作的图片转场/过渡动画（含教程）
本文给大家介绍10款用SVG蒙版制作的图片转场/过渡动画，并分析如何实现它们。
filter和backdrop-filter属性10大参数使用说明：blur()，drop-shadow()，opacity()等
CSS 数据类型<filter-function>代表可以改变输入图...
box-shadow最详细介绍：语法、参数、示例
CSS box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个...
drop-shadow() 语法、参数、示例、详解
drop-shadow() 是一个CSS 过滤器函数，其将投影效果应用于输入图像...
SVG实现的网页气泡动画效果
本文给大家介绍一个SVG实现的网页气泡动画效果。 

搜索

技术频道 - html技术

详细介绍字体单位：em、ex、ch、rem等

作者:admin    时间:2024-8-16 9:32:52    浏览:134

字体单位是相对测量单位，是根据其他一些值计算的，可以动态变化。

与字体相关的测量单位有如下几个：

单位 描述
em 元素字体大小
ex 小写字母高度x
ch 宽度0
rem 根元素字体大小

em

对于font-size这是继承的字体大小，对于其他属性，它是已经为 font-size 计算过的当前字体大小.。

为了查看这一点，让我们使用以下代码：

  1. body {
  2.  /* 基本字体大小 */
  3.  字体大小：42px；
  4. }
  5.  
  6. DIV {
  7.  /* 继承父字体并缩小一半 */
  8.  字体大小：.5em；
  9. }
  10.  
  11. /* 每种情况下的边框有多厚？ */
  12. .box-1 {
  13.  边框宽度：0.5em；
  14. }
  15. .box-2 {
  16.  边框宽度：1em；
  17. }

结果这样

 

粉色条纹是高度为1em的渐变，以便可以进行比较。

两个块具有相同的字体大小，相对于父元素 (font-size: .5em; ) 缩小一半。

现在如何将框架厚度设置为等于字体大小？

border-width: .5em使框架比需要的薄两倍，这是因为父字体大小仅使用font-size，而border从font-size中获取计算值。

因此，如果某个地方当前字体大小不需要使用font-size，则不需要复制大小值，只需指定1em。右侧块具有正确厚度的框架。

另一个了解em字体字符如何关联的演示。彩色条的高度为1em，因此可以看到它1em大致对应于字符的高度，考虑到大写字母和下降字母： 

 

test.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Gradients stripes with 1em height</title>
  6. <style>
  7. DIV {
  8.   --stripe-height: 1em;
  9.   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));
  10.   background-size: 100% calc(var(--stripe-height) * 6);
  11.   line-height: 1;
  12.   font-size: 2rem;
  13.   text-align: center;
  14.   outline: 1px solid #DDD;
  15. }
  16. DIV:nth-child(2) {
  17.   background-position: 0 calc(var(--stripe-height) * -3);
  18. }
  19. DIV:nth-child(3) {
  20.   background-position: 0 calc(var(--stripe-height) * -4);
  21. }
  22. DIV:nth-child(4) {
  23.   background-position: 0 calc(var(--stripe-height) * -1);
  24. }
  25.  
  26. BODY {
  27.   background: white;
  28.   min-height: 100vh;
  29.   display: grid;
  30.   grid-template-columns: repeat(2, -webkit-max-content);
  31.   grid-template-columns: repeat(2, max-content);
  32.   align-items: center;
  33.   align-content: center;
  34.   justify-content: center;
  35.   gap: 1rem;
  36. }
  37.  
  38. .arial {
  39.   font-family: Arial, sans-serif;
  40. }
  41.  
  42. .courier {
  43.   font-family: Courier New, monospace;
  44. }
  45.  
  46. .georgia {
  47.   font-family: georgia;
  48. }
  49.  
  50. .comic-sans {
  51.   font-family: Comic Sans MS;
  52. }
  53.  
  54. P {
  55.   margin: 0;
  56. }
  57. </style>
  58. </head>
  59.  
  60. <body>
  61.   <div class="arial">
  62.   <p>Arial</p>
  63.   <p>1234567890</p>
  64.   <p>ABCDEFGHIJ</p>
  65.   <p>abcdefghij</p>
  66. </div>
  67. <div class="georgia">
  68.   <p>Georgia</p>
  69.   <p>1234567890</p>
  70.   <p>ABCDEFGHIJ</p>
  71.   <p>abcdefghij</p>
  72. </div>
  73. <div class="comic-sans">
  74.   <p>Comic Sans</p>
  75.   <p>1234567890</p>
  76.   <p>ABCDEFGHIJ</p>
  77.   <p>abcdefghij</p>
  78. </div>
  79. <div class="courier">
  80.   <p>Courier</p>
  81.   <p>1234567890</p>
  82.   <p>ABCDEFGHIJ</p>
  83.   <p>abcdefghij</p>
  84. </div>
  85. </body>
  86. </html>

execcodegetcode

大小em在任何地方都不是固定的，是在使用时根据父字体大小计算的。例如，如果这样设置字体大小：

  1. DIV {
  2.   font-size: .75em;
  3. }

然后将几个 div 嵌套在一起，下一个 div 的字体大小将小于前一个：

 

test.html

  1. <!DOCTYPE html>
  2. <html lang="en" >
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Nested em</title>
  6. <style>
  7. DIV {
  8.   font-size: 0.75em;
  9.   padding: 0.25em 1em;
  10.   line-height: 1.5;
  11.   text-align: center;
  12.   outline: 1px solid #DDD;
  13. }
  14. DIV > DIV {
  15.   margin-top: 0.25em;
  16. }
  17.  
  18. BODY {
  19.   background: white;
  20.   min-height: 100vh;
  21.   display: grid;
  22.   grid-template-columns: repeat(2, -webkit-min-content);
  23.   grid-template-columns: repeat(2, min-content);
  24.   align-items: center;
  25.   align-content: center;
  26.   justify-content: center;
  27.   gap: 1rem;
  28.   font-family: Arial, sans-serif;
  29.   font-size: 4rem;
  30. }
  31. </style>
  32. </head>
  33. <body>
  34.   <div>
  35.   .75em
  36.   <div>
  37.     .75em
  38.     <div>
  39.       .75em
  40.       <div>
  41.         .75em
  42.         <div>
  43.           .75em
  44.         </div>
  45.       </div>
  46.     </div>
  47.   </div>
  48. </div>
  49. </body>
  50. </html>

execcodegetcode

因为1em是当前继承的字体大小，并且.75em是继承字体缩小了四分之一。对于每个新的嵌套 div，首先继承父级的缩小字体，然后也以指定的方式缩小。

如果想指定em重用组件的大小，需要记住这一点：当元素相互嵌套时，计算出的em值可能不是你想要得到的值。 

ex

ex-是小写字母x的高度。如果字体没有合适的度量，浏览器将尝试ex自行计算，如果由于某种原因不能这样计算，ex则认为等同于.5em。

在下面演示中，颜色条的高度为1ex，对于所选字体，1ex将等于小x的高度： 

 

test.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Gradients stripes with 1ex height</title>
  6. <style>
  7. DIV {
  8.   --stripe-height: 1ex;
  9.   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));
  10.   background-size: 100% calc(var(--stripe-height) * 6);
  11.   line-height: 1;
  12.   font-size: 2rem;
  13.   text-align: center;
  14.   outline: 1px solid #DDD;
  15. }
  16. DIV:nth-child(1) {
  17.   background-position: 0 -1.4ex;
  18. }
  19. DIV:nth-child(2) {
  20.   background-position: 0 -3.1ex;
  21. }
  22. DIV:nth-child(3) {
  23.   background-position: 0 -5.4ex;
  24. }
  25. DIV:nth-child(4) {
  26.   background-position: 0 -7ex;
  27. }
  28.  
  29. BODY {
  30.   background: white;
  31.   min-height: 100vh;
  32.   display: grid;
  33.   grid-template-columns: repeat(2, -webkit-max-content);
  34.   grid-template-columns: repeat(2, max-content);
  35.   align-items: center;
  36.   align-content: center;
  37.   justify-content: center;
  38.   gap: 1rem;
  39. }
  40.  
  41. .arial {
  42.   font-family: Arial, sans-serif;
  43. }
  44.  
  45. .courier {
  46.   font-family: Courier New, monospace;
  47. }
  48.  
  49. .georgia {
  50.   font-family: georgia;
  51. }
  52.  
  53. .comic-sans {
  54.   font-family: Comic Sans MS;
  55. }
  56.  
  57. P {
  58.   margin: 0;
  59. }
  60. </style>
  61. </head>
  62. <body>
  63.   <div class="arial">
  64.   <p>Arial</p>
  65.   <p>abcdefgxxxx</p>
  66. </div>
  67. <div class="georgia">
  68.   <p>Georgia</p>
  69.   <p>abcdefgxxxx</p>
  70. </div>
  71. <div class="comic-sans">
  72.   <p>Comic Sans</p>
  73.   <p>abcdefgxxxx</p>
  74. </div>
  75. <div class="courier">
  76.   <p>Courier</p>
  77.   <p>abcdefgxxxx</p>
  78. </div>
  79. </body>
  80. </html>

execcodegetcode

让我们看看ex字体如何影响它，以及ex与em有什么关系。

在此演示中，左侧组中的方块的大小为1em，右侧组中的方块的大小为2ex，因此你可以检查它们ex是否等于em的一半。此外，每个方块都有自己的字体： 

 

test.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="UTF-8"> 
  5.   <title>1em vs 2ex</title>
  6. <style>
  7. .box--em .cell {
  8.   width: 1em;
  9.   height: 1em;
  10. }
  11. .box--ex .cell {
  12.   width: 2ex;
  13.   height: 2ex;
  14. }
  15.  
  16. BODY {
  17.   background: white;
  18.   min-height: 100vh;
  19.   display: grid;
  20.   grid-template-columns: repeat(2, -webkit-max-content);
  21.   grid-template-columns: repeat(2, max-content);
  22.   align-items: center;
  23.   justify-content: center;
  24.   gap: 2rem;
  25.   font-size: 80px;
  26.   font-family: Arial, sans-serif;
  27. }
  28.  
  29. .title {
  30.   margin: 0;
  31.   margin-bottom: 0.4em;
  32.   font-size: 0.35em;
  33.   text-align: center;
  34.   font-weight: normal;
  35. }
  36.  
  37. .cells {
  38.   --gap: 1rem;
  39.   display: grid;
  40.   grid-template-columns: repeat(2, 1fr);
  41.   gap: var(--gap);
  42.   align-items: center;
  43.   justify-content: center;
  44.   justify-items: center;
  45.   padding: var(--gap);
  46.   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);
  47.   background-position: center;
  48.   background-size: 100% calc(var(--gap) + 2px), calc(var(--gap) + 2px) 100%;
  49.   background-repeat: no-repeat;
  50. }
  51.  
  52. .cell {
  53.   display: flex;
  54.   align-items: center;
  55.   justify-content: center;
  56.   text-align: center;
  57. }
  58. .cell::before {
  59.   font-size: 0.18em;
  60. }
  61.  
  62. .arial {
  63.   background: palegreen;
  64.   font-family: Arial, sans-serif;
  65. }
  66. .arial::before {
  67.   content: "Arial";
  68.   line-height: 1;
  69. }
  70.  
  71. .courier {
  72.   background: pink;
  73.   font-family: Courier New, monospace;
  74. }
  75. .courier::before {
  76.   content: "Courier";
  77. }
  78.  
  79. .georgia {
  80.   background: paleturquoise;
  81.   font-family: Georgia;
  82. }
  83. .georgia::before {
  84.   content: "Georgia";
  85. }
  86.  
  87. .comic-sans {
  88.   background: palegoldenrod;
  89.   font-family: Comic Sans MS;
  90. }
  91. .comic-sans::before {
  92.   content: "Comic Sans";
  93. }
  94. </style>
  95. </head>
  96. <body>
  97.   <div class="box box--em">
  98.   <h2 class="title">1em</h2>
  99.   
  100.   <div class="cells">
  101.     <div class="cell arial"></div>
  102.     <div class="cell georgia"></div>
  103.     <div class="cell comic-sans"></div>
  104.     <div class="cell courier"></div>
  105.   </div>
  106. </div>
  107.  
  108. <div class="box box--ex">
  109.   <h2 class="title">2ex</h2>
  110.   
  111.   <div class="cells">
  112.     <div class="cell arial"></div>
  113.     <div class="cell georgia"></div>
  114.     <div class="cell comic-sans"></div>
  115.     <div class="cell courier"></div>
  116.   </div>
  117. </div>
  118. </body>
  119. </html>

execcodegetcode

与em不同的是，ex大小会随字体而变化，并且在所有情况下2ex都不等于1em，即不能依赖.5中的比例。

ex就像em，它继承父级的字体大小： 

 

test.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Nested ex</title>
  6. <style>
  7. DIV {
  8.   font-size: 0.9ex;
  9.   padding: 0 0.5ex 0.25ex;
  10.   line-height: 1.3;
  11.   text-align: center;
  12.   outline: 1px solid #DDD;
  13. }
  14. DIV > DIV {
  15.   margin-top: 0.25ex;
  16. }
  17.  
  18. BODY {
  19.   background: white;
  20.   min-height: 100vh;
  21.   display: grid;
  22.   grid-template-columns: repeat(2, -webkit-min-content);
  23.   grid-template-columns: repeat(2, min-content);
  24.   align-items: center;
  25.   align-content: center;
  26.   justify-content: center;
  27.   gap: 1rem;
  28.   font-family: Arial, sans-serif;
  29.   font-size: 10rem;
  30. }
  31. </style>
  32. </head>
  33. <body>
  34.   <div>
  35.   .9ex
  36.   <div>
  37.     .9ex
  38.     <div>
  39.       .9ex
  40.       <div>
  41.         .9ex
  42.       </div>
  43.     </div>
  44.   </div>
  45. </div>
  46. </body>
  47. </html>

execcodegetcode

x

ch

ch— 字符宽度0。对于等宽字体，这是任何字符的精确宽度；对于其他字体，这是一个窄字符的近似宽度。如果由于某种原因无法计算宽度，则后备值将为.5em。

警告不要尝试使用ch字符来设置容器的宽度，因为它不能按预期工作。在下面的演示中，每个文本块的宽度设置如下： 

  1. DIV {
  2.   width: 10ch;
  3. }

块宽度仅适用于等宽字体，在某些字体中它适用于数字（Arial, Comic Sans），在其他情况下不能期望它1ch等于字符宽度：

 

test.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Unit ch</title>
  6. <style>
  7. DIV {
  8.   width: 10ch;
  9.   --stripe-width: 1ch;
  10.   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));
  11.   background-size: calc(var(--stripe-width) * 6) 100%;
  12.   line-height: 1.2;
  13.   font-size: 1.8rem;
  14.   text-align: center;
  15.   outline: 1px solid #DDD;
  16. }
  17. DIV:nth-child(1) {
  18.   background-position: 0 -1.4ex;
  19. }
  20. DIV:nth-child(2) {
  21.   background-position: 0 -3.1ex;
  22. }
  23. DIV:nth-child(3) {
  24.   background-position: 0 -5.4ex;
  25. }
  26. DIV:nth-child(4) {
  27.   background-position: 0 -7ex;
  28. }
  29.  
  30. BODY {
  31.   background: white;
  32.   min-height: 100vh;
  33.   display: grid;
  34.   grid-template-columns: repeat(2, -webkit-max-content);
  35.   grid-template-columns: repeat(2, max-content);
  36.   align-items: center;
  37.   align-content: center;
  38.   justify-content: center;
  39.   gap: 2rem;
  40. }
  41.  
  42. .arial {
  43.   font-family: Arial, sans-serif;
  44. }
  45.  
  46. .courier {
  47.   font-family: Courier New, monospace;
  48. }
  49.  
  50. .georgia {
  51.   font-family: georgia;
  52. }
  53.  
  54. .comic-sans {
  55.   font-family: Comic Sans MS;
  56. }
  57.  
  58. P {
  59.   margin: 0;
  60. }
  61. </style>
  62. </head>
  63. <body>
  64.   <div class="arial">
  65.   <p>Arial</p>
  66.   <p>1234567890</p>
  67.   <p>ABCDEFGHIJ</p>
  68.   <p>abcdefghij</p>
  69. </div>
  70. <div class="georgia">
  71.   <p>Georgia</p>
  72.   <p>1234567890</p>
  73.   <p>ABCDEFGHIJ</p>
  74.   <p>abcdefghij</p>
  75. </div>
  76. <div class="comic-sans">
  77.   <p>Comic Sans</p>
  78.   <p>1234567890</p>
  79.   <p>ABCDEFGHIJ</p>
  80.   <p>abcdefghij</p>
  81. </div>
  82. <div class="courier">
  83.   <p>Courier</p>
  84.   <p>1234567890</p>
  85.   <p>ABCDEFGHIJ</p>
  86.   <p>abcdefghij</p>
  87. </div>
  88. </body>
  89. </html>

execcodegetcode

我们来比较1em、2ex和2ch：

 

test.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>1em vs 2ex vs 2ch</title>
  6. <style>
  7. .box--em .cell {
  8.   width: 1em;
  9.   height: 1em;
  10. }
  11. .box--ex .cell {
  12.   width: 2ex;
  13.   height: 2ex;
  14. }
  15. .box--ch .cell {
  16.   width: 2ch;
  17.   height: 2ch;
  18. }
  19.  
  20. BODY {
  21.   background: white;
  22.   min-height: 100vh;
  23.   display: grid;
  24.   grid-template-columns: repeat(3, -webkit-max-content);
  25.   grid-template-columns: repeat(3, max-content);
  26.   align-items: center;
  27.   justify-content: center;
  28.   gap: 2rem;
  29.   font-size: 70px;
  30.   font-family: Arial, sans-serif;
  31. }
  32.  
  33. .title {
  34.   margin: 0;
  35.   margin-bottom: 0.4em;
  36.   font-size: 0.35em;
  37.   text-align: center;
  38.   font-weight: normal;
  39. }
  40.  
  41. .cells {
  42.   --gap: 1rem;
  43.   display: grid;
  44.   grid-template-columns: repeat(2, 1fr);
  45.   gap: var(--gap);
  46.   align-items: center;
  47.   justify-content: center;
  48.   justify-items: center;
  49.   padding: var(--gap);
  50.   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);
  51.   background-position: center;
  52.   background-size: 100% calc(var(--gap) + 2px), calc(var(--gap) + 2px) 100%;
  53.   background-repeat: no-repeat;
  54. }
  55.  
  56. .cell {
  57.   display: flex;
  58.   align-items: center;
  59.   justify-content: center;
  60.   text-align: center;
  61. }
  62. .cell::before {
  63.   font-size: 0.18em;
  64. }
  65.  
  66. .arial {
  67.   background: palegreen;
  68.   font-family: Arial, sans-serif;
  69. }
  70. .arial::before {
  71.   content: "Arial";
  72.   line-height: 1;
  73. }
  74.  
  75. .courier {
  76.   background: pink;
  77.   font-family: Courier New, monospace;
  78. }
  79. .courier::before {
  80.   content: "Courier";
  81. }
  82.  
  83. .georgia {
  84.   background: paleturquoise;
  85.   font-family: Georgia;
  86. }
  87. .georgia::before {
  88.   content: "Georgia";
  89. }
  90.  
  91. .comic-sans {
  92.   background: palegoldenrod;
  93.   font-family: Comic Sans MS;
  94. }
  95. .comic-sans::before {
  96.   content: "Comic Sans";
  97. }
  98. </style>
  99. </head>
  100.  
  101. <body>
  102.   <div class="box box--em">
  103.   <h2 class="title">1em</h2>
  104.   
  105.   <div class="cells">
  106.     <div class="cell arial"></div>
  107.     <div class="cell georgia"></div>
  108.     <div class="cell comic-sans"></div>
  109.     <div class="cell courier"></div>
  110.   </div>
  111. </div>
  112.  
  113. <div class="box box--ex">
  114.   <h2 class="title">2ex</h2>
  115.   
  116.   <div class="cells">
  117.     <div class="cell arial"></div>
  118.     <div class="cell georgia"></div>
  119.     <div class="cell comic-sans"></div>
  120.     <div class="cell courier"></div>
  121.   </div>
  122. </div>
  123.  
  124. <div class="box box--ch">
  125.   <h2 class="title">2ch</h2>
  126.   
  127.   <div class="cells">
  128.     <div class="cell arial"></div>
  129.     <div class="cell georgia"></div>
  130.     <div class="cell comic-sans"></div>
  131.     <div class="cell courier"></div>
  132.   </div>
  133. </div>
  134. </body>
  135. </html>

execcodegetcode

显然：

  • 1ch更大1ex（宽度0大于高度x）；
  • 1ch不等于em一半；
  • ch可能会随字体而变化。 

rem

rem是root em根元素的字体大小；对于网页来说，这是 element html。默认字体大小为16px，该值在规范中并不固定，但被所有浏览器使用。

如果用户在浏览器设置中设置不同的值，它将覆盖根元素的字体大小。也就是说，如果你需要制作一个会缩放到用户选择的字体大小的界面，那么使用rem。

重要的是要了解rem大小只能针对html，例如，采用以下样式： 

  1. BODY {
  2.   font-size: 24px;
  3. }
  4.  
  5. DIV {
  6.   font-size: 1rem;
  7. }

如果rem可以覆盖任何地方，文本就会增加，但这并没有发生：

 

test.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Try to override rem in body</title>
  6. <style>
  7. HTML {
  8.   font-size: 16px;
  9. }
  10.  
  11. BODY {
  12.   font-size: 24px;
  13. }
  14.  
  15. DIV {
  16.   font-size: 1rem;
  17. }
  18.  
  19. BODY {
  20.   background: white;
  21.   min-height: 100vh;
  22.   display: grid;
  23.   align-items: center;
  24.   justify-content: center;
  25.   font-family: Arial, sans-serif;
  26. }
  27.  
  28. P {
  29.   margin: 0;
  30.   text-align: center;
  31. }
  32.  
  33. DIV {
  34.   --stripe-height: 24px;
  35.   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));
  36.   background-size: 100% calc(var(--stripe-height) * 6);
  37.   line-height: 1;
  38.   outline: 1px solid #DDD;
  39. }
  40. </style>
  41.  
  42. </head>
  43. <body>
  44.   <div>
  45.   <p>1234567890</p>
  46.   <p>ABCDEFGHIJ</p>
  47.   <p>abcdefghij</p>
  48. </div>
  49.  
  50. </body>
  51. </html>

execcodegetcode

颜色条的高度24px，以便有东西可以比较。

如果覆盖元素html的字体大小，一切都会正常： 

  1. HTML {
  2.   font-size: 24px;
  3. }
  4.  
  5. DIV {
  6.   font-size: 1rem;
  7. }

 

test.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Change html font-size</title>
  6. <style>
  7. HTML {
  8.   font-size: 24px;
  9. }
  10.  
  11. DIV {
  12.   font-size: 1rem;
  13. }
  14.  
  15. BODY {
  16.   background: white;
  17.   min-height: 100vh;
  18.   display: grid;
  19.   align-items: center;
  20.   justify-content: center;
  21.   font-family: Arial, sans-serif;
  22. }
  23.  
  24. DIV {
  25.   --stripe-height: 24px;
  26.   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));
  27.   background-size: 100% calc(var(--stripe-height) * 6);
  28.   line-height: 1;
  29.   outline: 1px solid #DDD;
  30. }
  31.  
  32. P {
  33.   margin: 0;
  34.   text-align: center;
  35. }
  36. </style>
  37.  
  38. </head>
  39. <body>
  40.   <div>
  41.   <p>1234567890</p>
  42.   <p>ABCDEFGHIJ</p>
  43.   <p>abcdefghij</p>
  44. </div>
  45. </body>
  46. </html>

execcodegetcode

与em不同的是，rem它始终仅包含根元素的字体大小，因此嵌套不会影响任何内容：

 

test.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Nested rem</title>
  6. <style>
  7. HTML {
  8.   font-size: 24px;
  9. }
  10.  
  11. DIV {
  12.   font-size: 0.9rem;
  13.   padding: 0.25rem 0.5rem;
  14.   line-height: 1.3;
  15.   text-align: center;
  16.   outline: 1px solid #DDD;
  17. }
  18. DIV > DIV {
  19.   margin-top: 0.25rem;
  20. }
  21.  
  22. BODY {
  23.   background: white;
  24.   min-height: 100vh;
  25.   display: grid;
  26.   grid-template-columns: repeat(2, -webkit-min-content);
  27.   grid-template-columns: repeat(2, min-content);
  28.   align-items: center;
  29.   align-content: center;
  30.   justify-content: center;
  31.   gap: 1rem;
  32.   font-family: Arial, sans-serif;
  33.   font-size: 10rem;
  34. }
  35. </style>
  36. </head>
  37. <body>
  38.   <div>
  39.   .9rem
  40.   <div>
  41.     .9rem
  42.     <div>
  43.       .9rem
  44.       <div>
  45.         .9rem
  46.       </div>
  47.     </div>
  48.   </div>
  49. </div>
  50. </body>
  51. </html>

execcodegetcode

这允许你制作尺寸与基本字体大小相关的组件，但不依赖于彼此之间的元素嵌套。

总结

本文详细介绍字体单位：em、ex、ch、rem等，通过本文的学习，你应该对字体单位有了更加充分的了解。

x
search
广告: CN2云主机 免费试用