在 CSS 中创建响应式字体

Ashok Chapagai 2023年12月11日
  1. 在 CSS 中使用视口值创建响应式字体
  2. 在 CSS 中使用媒体查询创建响应式字体
  3. 在 CSS 中使用 calc() 函数创建响应式字体
  4. 在 CSS 中使用 clamp() 函数创建响应式字体
在 CSS 中创建响应式字体

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

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

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

例如,创建每个 h1h2p 标签。在这些标签之间写一些你选择的文本。在 CSS 中,将 h1h2p 标签的 font-size 属性分别设置为 5.9vw3.0vh2vmin

当我们调整浏览器的大小时,浏览器的视口会发生变化,文本的字体大小也会随之发生变化。这样,我们就可以使用字体大小中的视口单位在 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() 函数来设置任何属性,例如 lengthanglepercentagenumber 等。我们可以使用该函数在 CSS 中制作响应式字体。

示例代码:

h1{
    font-size : clamp(2rem, 10vw, 5rem);
}
<h1> Hey boy </h1>
<h2> Hey girl </h2>
<p> Hey kid </p>

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

作者: Ashok Chapagai
Ashok Chapagai avatar Ashok Chapagai avatar

Ashok is an avid learner and senior software engineer with a keen interest in cyber security. He loves articulating his experience with words to wider audience.

LinkedIn GitHub

相关文章 - CSS Font