迹忆客 专注技术分享

这篇文章解释了仅使用 CSS 实现响应式字体的方法。我们将介绍现代 CSS 和 CSS3 如何使字体在不同屏幕尺寸的设备上看起来可读的几种方法。

在 CSS 中使用视口值创建响应式字体

使字体响应的最简单方法之一是根据视口的大小或浏览器的窗口大小调整字体大小。CSS 提供了与浏览器窗口轴相关的各种视口单位，它们在制作响应式网页时非常有用。一些视口单位是 vw、vh、vmin 和 vmax。我们可以从 CSS 单位中获取这些单位的信息。我们可以使用这些视口单位而不是 em、px 或 pt 来制作响应式字体。

例如，创建每个 h1、h2 和 p 标签。在这些标签之间写一些你选择的文本。在 CSS 中，将 h1、h2 和 p 标签的 font-size 属性分别设置为 5.9vw、3.0vh 和 2vmin。

当我们调整浏览器的大小时，浏览器的视口会发生变化，文本的字体大小也会随之发生变化。这样，我们就可以使用字体大小中的视口单位在 CSS 中创建响应式字体。

示例代码：

<h1> Hey boy </h1>
<h2> Hey girl </h2>
<p> Hey kid </p>

h1 {
    font-size: 5.9vw;
}
h2 {
    font-size: 3.0vh;
}
p {
    font-size: 2vmin;
}

在 CSS 中使用媒体查询创建响应式字体

我们可以使用媒体查询在 CSS 中创建响应式字体。我们还可以利用媒体查询来更改设备特定高度/宽度的字体大小。我们使用@media 关键字来编写媒体查询。

例如，将 font-size 属性设置为 3em。接下来编写条件为 max-width:320px 的媒体查询。然后，将 font-size 属性设置为 2em。

示例代码：

body{
    font-size: 3em;
}
@media only screen and (max-width: 320px) {
    body {
        font-size: 2em; 
    }
}

<h1> Hey boy </h1>
<h2> Hey girl </h2>
<p> Hey kid </p>

在这里，当上面的代码被实现并在屏幕尺寸小于 320px 的设备上运行时，字体大小会减小。对于高度低于 320px 的设备，字体设置为 2em。对于屏幕尺寸大于 320px 的设备，字体将为 3em。

这种方法的缺点是，如果设计开始破坏具有特定尺寸的设备，我们可能需要添加更多媒体查询。

在 CSS 中使用 calc() 函数创建响应式字体

由于现在大多数现代浏览器都支持 CSS 中的 calc() 方法，这使得编写响应式代码变得更加容易。此外，这种方法也更有效，可以在不使代码混乱的情况下完成任务。我们可以使用 calc() 函数使字体大小响应。函数的结果是属性的值。

例如，将 body 标签的 font-size 属性设置为 calc() 函数。在函数内部，写 0.75em + 1vw。

示例代码：

body {
    font-size: calc(0.75em + 1vw);
}

<h1> Hey boy </h1>
<h2> Hey girl </h2>
<p> Hey kid </p>

字体大小会随着 1vw 值在不同屏幕尺寸的设备上的变化而变化。因此，我们可以在 CSS 中创建响应式字体。

在 CSS 中使用 clamp() 函数创建响应式字体

clamp() 函数将值夹在最大值和最小值之间。该函数接受三个参数作为参数，第一个是最小值，第二个是首选值，最后一个是最大允许值。我们可以使用 clamp() 函数来设置任何属性，例如 length、angle、percentage、number 等。我们可以使用该函数在 CSS 中制作响应式字体。

示例代码：

h1{
    font-size : clamp(2rem, 10vw, 5rem);
}

<h1> Hey boy </h1>
<h2> Hey girl </h2>
<p> Hey kid </p>

在上面的示例中，值 2rem 是允许的最小字体大小。同样，下一个值 10vw 是默认字体大小，最后一个值 5rem 是允许的最大字体大小。在这里，我们需要注意中间的值应该是相对的，如 vw、ch 或 vh，而不是绝对的，如 px 和 pt。