Logo

菜单

发布于 2026-01-06 2 阅读
0

CSS DEV 的全球展示挑战赛“响应式字体”由 Mux 呈现：展示你的项目！

CSS中的响应式字体

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

CSS 为 Web 应用程序开发提供了多种单位选择。
许多属性，例如 padding、margin、font-size、width、height 等，都以长度后跟单位作为值。

优秀的开发人员应该能够决定如何以及何时使用这些单位。

这篇博客文章是关于什么的？

我们将讨论 CSS 中一些与字体相关的常用单位，并了解如何使字体大小具有响应式。

点击此处查看本文示例的演示网站。

阅读本博客的前提条件

本文假设您熟悉 HTML 和 CSS 的基础知识。

CSS中的字体单位

  • 一般来说，px、rem、em和%是 CSS 中最常用的单位。
  • 虽然 CSS 中还有许多其他单位可用，但上述单位是首选font-size。
  • 让我们来讨论这四个单位，并尝试理解它们如何以及何时可以使用。

像素

  • px是一个绝对单位。也就是说，它定义的是固定值，不会随着屏幕/设备宽度的变化而缩放。
  • 这些方法之所以被广泛使用，是因为它们易于理解，使用起来毫不费力。
  • 它相当于 1/96英寸，通常浏览器中文本的默认大小为16 像素。

  • 让我们利用下图更好地理解像素 (px)。
    段落字体大小以像素为单位

     div.pixel p {
    font-size: 20px;
    width: 300px;
 }
    • 它<p>有一个font-size: 20px。现在请看下图，它显示了屏幕尺寸较小的设备上的同一段文字。在较小的视口中，段落字体大小以像素为单位
    • 注意即使视口尺寸减小，它仍然font-size存在。20px

  • 这就是使用像素作为长度属性时存在的问题。它不具备响应式设计，不会根据视口大小进行缩放。

    • 请点击此处查看上述代码的示例：

雷姆

  • rem是一个相对单位。也就是说，它会随着视口大小的变化而缩放。
  • 该单元用途广泛，深受开发商推荐。
  • in rrem 代表根。
    • 1 rem 单位是根元素的字体大小，即<html>。

  • 让我们通过一个例子来理解rem。请看下面的代码。

     div.rem p {
     font-size: 2rem; /* 2 * 16 = 32px */
 }
    • 请点击此处查看上述示例中的钢笔：
  • 如果您不覆盖根元素的默认字体大小，即<html>，则其字体大小为16px。
    • 在上述示例中， `<div>` 的字体大小<p>将是根元素大小的 2 倍。也就是说：2 * 16 = 32px。以 rem 为单位计算段落字体大小

  • 另一个例子是覆盖16px根元素的默认值。

     html {
     font-size: 20px;
 }
 div.rem p {
     font-size: 0.5rem;  /* 0.5 * 20 = 10px */
 }
    • 请点击此处查看上述示例中的钢笔：
  • 如上所述，rem具有很高的响应速度，并且用户体验友好。
  • 为了检查响应速度，请尝试以下操作。
    1. 去你的browser settings
    2. 在下方appearance，选择Font size
    3. 尝试更改Font size浏览器的设置，并查看使用定义的单位长度标签的计算结果。rem 演示如何更改浏览器字体大小的 GIF 动画
    4. 你会发现字体大小会根据浏览器选择的字体大小而变化。

注意：如果您覆盖了根元素的默认字体大小，则更改浏览器的字体大小不会影响已定义内容的字体大小。

  • 使用rem定义的字体大小将相对于覆盖默认根字体大小的手动值。

艾米

  • em与rem非常相似，但区别在于em是相对于其父容器的。

  • 让我们沿用之前的段落示例，并按照下面的代码进行操作。

     div.em {
     font-size: 15px;
 }
 div.em p {
     font-size: 2em; /* 2 * 15 = 30px */
 }
    • 请点击此处查看上述示例中的钢笔：
  • 由于<div>是父元素<p>，因此内部内容的字体大小<p>将是为定义的字体大小的两倍<div>。
    • 也就是说，2 * 15 =30px would be the font-size of

      `。

  • 下图显示了上述代码的运行结果。段落字体大小以 em 为单位定义。
  • 现在，请考虑以下代码所示的场景：

  • 这是 HTML 代码

     <div class="em">
    <ul>
       <li>1. Lorem</li>
       <ul>
           <li>1.1. Lorem</li>
           <ul>
               <li>1.1.1. Lorem</li>
           </ul>
       </ul>
    </ul>
 </div>

  • 这是 CSS 代码

     div.em {
    font-size: 20px;
 }
 ul {
    font-size: 2rem;
 }

  • 猜猜里面的内容会发生什么变化<li>？字体大小会变成什么样？
    使用 em 定义时嵌套 li 元素的字体大小

  • 是不是很出乎意料？

  • 这时事情就会变得棘手且难以控制。

    • 当有多个嵌套元素时，需要注意分配的长度。
    • 请点击此处查看上述示例中的钢笔<ul>：
  • 要检查响应速度，您可以尝试更改浏览器的字体大小（如上所示，以rem为单位）。

注意：如果您覆盖了根元素的默认字体大小，则更改浏览器的字体大小不会影响已定义内容的字体大小。

  • 使用em定义的字体大小将相对于该元素的父元素。如果父元素是根元素，则该元素的字体大小将相对于根元素的已覆盖字体大小。
  • 如果您使用em ，还需要注意一点：当您将其用于宽度或内边距等属性时，长度取决于元素本身的字体大小。
    • 例如，假设你有一个<p>元素位于一个 中<div>，并且 的字体大小为<div>12px，<p>那么 就是2em。
    • 如果你将内边距设置<p>为 2em，那么内边距<p>将是2em 48px，而不是 2em 24px。
    • 这是因为其他属性会乘以元素本身的字体大小值。
    • 因此，当您使用em作为字体大小单位时，请记住这一点。

百分比

  • %是一个相对单位，它是相对于父元素的字体大小而言的。

  • 和我们之前对它们所做的类似场景，假设我们有一个<p>内部的<div>。

     html {
    font-size: 20px;
 }
 div.percentage {
    font-size: 150%;
 }
 div.percentage p {
    font-size: 200%;
 }
    • 请在此处查找上述代码的 Pen：

  • 我们来看看字体大小<p>会是多少。

    • 的字体大小<p>取决于<div>，而的字体大小<div>取决于其父元素。（在本例中<html>：）
    • 由于字体大小为<html>20px，因此字体大小<div>应为 1.5 * 20 = 30px。
    • 字体大小<p>为 30 * 2 = 60px。

  • 请查看下图，了解上述代码的运行结果：

    使用 p 定义的段落

  • 要检查响应速度，您可以尝试更改浏览器的字体大小（如上所示，以rem为单位）。
  • 注意：如果您覆盖了根元素的默认字体大小，则更改浏览器的字体大小不会影响已定义内容的字体大小。
    • 使用百分比定义的字体大小将相对于该元素的父元素。如果父元素是根元素，则该元素的字体大小将相对于根元素的已覆盖字体大小。

结论

我们已经了解了 CSS 中可用于字体的四种不同单位。
如前所述，还有许多其他单位值得探索和使用。但以上介绍的单位是开发者最常用的。

点击此处查看本文示例的演示网站。

  • 一个可以遵循的经验法则是：字体大小应始终使用rem单位。由于 rem 单位继承自根元素，因此易于使用、管理和计算元素的大小。

  • 此外，当您为嵌套元素定义字体大小时，它不会像em那样呈指数级增长。

  • 当你想让子元素继承父元素的字体大小并使其行为与父元素相同时，可以使用 em 属性。但要注意继承关系。

  • 至于百分比（%），它与单位（em）非常相似。但主要区别在于单位（em）的缩放速度比百分比（%）快。
    em 和百分比

    • 当用户将浏览器文本大小设置为“中等”时，em和%之间几乎没有区别。
    • 但正如你在上图中看到的，当浏览器文本大小设置为最小时，与百分比相比，em几乎难以辨认。
    • 当浏览器窗口大小设置为最大时，em显示得比%大得多。

  • 大多数人也用像素(px)来设置字体大小。但我完全不建议使用这种方法，因为它既不方便用户使用，也不具备响应式设计。

一般来说，我的建议是：

rem > 百分比 > em > px

参考

感谢您阅读这篇博文。

我希望您已经理解了 CSS 中字体大小的常用单位，我相信这对您将来开发响应式网站会非常有帮助！

请点赞、收藏或保存这篇文章，并分享给你的开发者朋友们！

文章来源：https://dev.to/bharati21/responsive-fonts-in-css-m44
Yarn 和第三方 NPM 客户端...
我是如何以学生开发者的身份免费获得...