如何对齐 CSS 中的数字？

Question

我在我的一个页面中使用 Playfair Display（Google 字体）。

这是页面中数字的显示方式。他们都是不对齐的。下面是图片。

下面是同Google字体的Aligned Fonts图片。（我从 Figma 中截取了图片，Figma 中有一个更改字体样式的选项）我必须让我的字体看起来像这样，我该怎么做？

Answer 1

您可以通过添加 CSS 指示浏览器使用衬里数字来解决此问题。阅读更多 here

body {
  font-family: 'Playfair Display', serif;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum";
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" rel="stylesheet">

123456789

Answer 2

请试试这个！

h1, p {
  font-family: 'Playfair Display', serif;
  font-feature-settings: "lnum";
}

.number {
    background: #55bd55;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    font-size: 25px;
    height: 60px;
}

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" rel="stylesheet">

</head>
<body>

<h1>Sample Header</h1>
<p class="number">123456789</p>

</body>
</html>

如何对齐 CSS 中的数字？

How to align numbers in CSS?

html

css

fonts