在前端开发中，我们经常需要选择合适的字体应用到我们的网页中，来提高界面整体的美观度以及用户的阅读体验。而 @typopro/web-overpass 就是一个优秀的字体选择。
1. 什么是 @typopro/web-overpass
@typopro/web-overpass 是一个开源的字体包，其中包含了数十种精选的 OpenType 字体。这些字体能够很好的适应屏幕和打印等多个不同的场景下，能够提供更好的阅读体验。
相较于传统的字体集，@typopro/web-overpass 采用了新的技术，它利用了 OpenType 变量字体技术的优势，从而可以在运行时产生具有更细致控制能力的字体。这就让它比传统的字体集更加的灵活、高效和可控。
2. 安装和使用
2.1 安装
@typopro/web-overpass 可以通过 npm 安装，你需要使用以下命令：
npm install @typopro/web-overpass
2.2 使用
安装完成之后，你需要添加以下代码到你的 HTML 文件中：
<head> <link rel="stylesheet" href="https://unpkg.com/@typopro/web-overpass@0.13.0/css/web-overpass.css" /> </head>
接下来，你需要在 CSS 文件中添加以下代码：
body {
font-family: "Overpass", sans-serif;
}现在，你就可以使用 Overpass 字体了。
3. 使用变量字体
使用变量字体可以获得更细致的控制效果，在不同屏幕下都能获得更加优秀的阅读体验。
使用变量字体的方式，可以通过在 font-size、font-variation-settings 和 font-weight 等属性中使用 calc() 函数，从而实现不同屏幕下的自适应字体大小和变量字体效果。
例如，下面的代码可以让我们控制字体大小和粗细来改善不同场景下的阅读效果：
body {
font-family: "Overpass", sans-serif;
font-size: calc(14px + (18 - 14) * (100vw - 375px) / (1440 - 375));
font-weight: calc(300 + (400 - 300) * (100vw - 375px) / (1440 - 375));
font-variation-settings: "wght" calc(400 + (700 - 400) * (100vw - 375px) / (1440 - 375));
}4. 示例代码
- HTML：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------- --- ----------------
----- ---------------- -------------------------------------------------------------------------- --
-------
---- -
------------ ----------- -----------
---------- --------- - --- - --- - ------ - ------ - ----- - ------
------------ -------- - ---- - ---- - ------ - ------ - ----- - ------
------------------------ ------ -------- - ---- - ---- - ------ - ------ - ----- - ------
-
--------
-------
------
---------- -----------
------- -- -- ----- ---- ---------
-------
-------- CSS：
-- -------------------- ---- ------- ------- ------------------------------------------------------------------------------------ --- --- --- --- --- -- - ------------ ------- ---- ----- ----------- ------------ ---- - ---- - ---------- ----- ------------ ---- ------------ ------- ---- ----- ----------- ------------ ---- -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc781e8991b448dd42e