📌  相关文章
📜  css 垂直拉伸字体 - CSS (1)

📅  最后修改于: 2023-12-03 15:00:08.234000             🧑  作者: Mango

CSS 垂直拉伸字体

在 CSS 中实现垂直拉伸字体可以让你的文本内容更加独特和引人注目。本指南将介绍如何用 CSS 实现垂直拉伸字体效果。

使用 font-stretch 属性

font-stretch 属性用于控制字体宽度的程度，包括普通、压缩或拉伸。因此，我们可以使用该属性来垂直拉伸字体。

h1 {
  font-stretch: ultra-expanded;
}

以上代码将 h1 标签内文字的字体拉伸到极限，效果类似于拉伸图像时出现的失真。

使用 SVG

SVG（Scalable Vector Graphics）是一种矢量图形格式，可以用它来创建可伸缩的图像和动画。我们可以使用 SVG 实现垂直拉伸字体的效果。

<h2>
  <svg viewBox="0 0 100 100">
    <text x="0" y="50" font-size="70">Vertical Stretch</text>
  </svg>
</h2>

以上代码中，我们在 h2 标签内嵌套了一个 SVG 元素，并在 SVG 中添加了一个文本元素。通过修改 y 值，我们可以实现垂直拉伸字体的效果。

示例

下面是一个完整的示例，演示如何用 CSS 实现垂直拉伸字体效果。

<!DOCTYPE html>
<html>
  <head>
    <title>CSS 垂直拉伸字体</title>
    <style>
      h1 {
        font-size: 3em;
        font-stretch: ultra-expanded;
        margin-bottom: 0;
      }
      h1 span {
        letter-spacing: 0.25em;
      }
      .subheading {
        font-size: 1.5em;
        font-weight: bold;
        text-transform: uppercase;
        margin-top: 0;
      }
    </style>
  </head>
  <body>
    <h1>
      <span>Vertical</span>
      <br />
      <span>Stretch</span>
    </h1>
    <p class="subheading">Using CSS font-stretch property</p>
    <h2>
      <svg viewBox="0 0 100 100">
        <text x="0" y="60" font-size="70">Vertical Stretch</text>
      </svg>
    </h2>
    <p class="subheading">Using SVG</p>
  </body>
</html>

效果如下：

CSS 垂直拉伸字体

在 CSS 中实现垂直拉伸字体可以让你的文本内容更加独特和引人注目。本指南将介绍如何用 CSS 实现垂直拉伸字体效果。

使用 font-stretch 属性

font-stretch 属性用于控制字体宽度的程度，包括普通、压缩或拉伸。因此，我们可以使用该属性来垂直拉伸字体。

Vertical
Stretch

Using CSS font-stretch property

使用 SVG

SVG（Scalable Vector Graphics）是一种矢量图形格式，可以用它来创建可伸缩的图像和动画。我们可以使用 SVG 实现垂直拉伸字体的效果。

<h2>
  <svg viewBox="0 0 100 100">
    <text x="0" y="60" font-size="70">Vertical Stretch</text>
  </svg>
</h2>
<p class="subheading">Using SVG</p>

效果如下：

Vertical Stretch

Using SVG