1. 手动添加字体,但是可能会出现浏览器不兼容问题
2. 从goole font下载字体
- 在 HTML 中添加字体引入链接把以下代码添加到 HTML 文件的 `<head>` 部分,用于加载 Google Fonts 的 Open Sans 字体
```
<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=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
```
- 将下面的 CSS 代码添加到你的样式表中,并根据需要自定义 `<uniquifier>` 和 `<weight>`:
```
.open-sans-example {
font-family: "Open Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 400; /* 替换为你想要的权重值,例如 300、400、600、800 */
font-style: normal;
font-variation-settings:
"wdth" 100;
}
```
- 通过在 HTML 元素上应用该 CSS 类,你可以将字体样式用于具体的文本元素:
```
<p class="open-sans-example">This is a paragraph using Open Sans font.</p>
```
3. 如果css 文件的字体是一致的,就检查设备上的浏览器字体是否一致
```
chrome://settings/fonts
```