可变字体不仅仅可以改变粗细

mdruhul13

还有其他方法可以更改显示的字体吗？

杰森：是的。这完全取决于类型设计师。我认为有必要强调一下，这并不是浏览器中的所有人都可以免费使用的。浏览器只能渲染字体中已启用的内容。最终，是字体设计师说的重量范围是这样的。您可能有一个宽度轴。它会变得更窄一点或更宽一点，但也有能力拥有所谓的注册轴。有宽度、重量、倾斜度、斜体和光学尺寸。这些都是映射到 CSS 属性的核心内容。倾斜允许一个和另一个之间存在一定的角度，因此是直立的，我实际上见过具有反向倾斜和向前倾斜的倾斜。那是完全开放的。斜体通常打开或关闭，但不一定。你实际上可以拥有……嗯，有些字体设计师已经尝试过，当你从正常字体转换为斜体字体时，逐渐改变字母形式，并在此过程中替换字母。这是一件很有趣的事情。

杰森：但还有定制轴的能力。类型设计者可以定义他们想要改变的任何自定义轴。您已经 阿联酋电话号码列表 看到过添加某种重力传播的滴水和各种有趣的扭曲形状，或延伸衬线，改变上升部和下降部的高度。在小写字母形式上，更改它们是否为衬线。您可以做各种各样的事情。这真的取决于字体设计师的想象力。我认为我们只是触及了所有这些事情实际可能发生的情况的表面。这一切都可以通过 CSS 访问。

德鲁：是的。所有这些属性都可以通过您与设计的其余部分一起提供的普通 CSS 进行调整。我们可以在 CSS 中做哪些事情来触发这些更改？这是否就像我们使用响应式布局所做的那样，我们有媒体查询来触发它？

杰森：有各种各样的方法可以做到这一点。您必须做出一个小改变。我假设我们将提供一些指向某些内容的链接，以帮助人们使用这些内容。我的意思是，我写了一堆。希望这能帮助人们。然后在使用方面，字体粗细轴只是映射到字体粗细。您只需提供一个数字，而不是常规的粗体。您可以使用媒体查询来更改它。



您可以使用 JavaScript 更改它。你可以用它做任何你想做的事。我一直在使用一种称为 CSS Locks 的技术，这是我从 Tim Brown 那里学到的，主要用于使用数学。CSS 自定义属性和计算来缩放，一旦您遇到一个小断点到一个大断点，它就会平滑地缩放字体大小和行高。

杰森：然后，如果您愿意，您还可以使用一点 JavaScript 对它们的权重执行相同的操作。粗细轴映射到字体粗细，即 CSS 属性。字体中的宽度轴将映射到字体拉伸，并且仅以百分比表示。我应该指出，许多字体设计师不一定会考虑如何表达它，因此您可能会看到粗细范围做奇怪的事情，例如从 400 到 650。您仍然必须将其表示为百分比，但它有效。没关系。您只需要知道什么是正常的并且所有字体都已记录。然后，除了这两者之外，目前，对倾斜和斜体的实现支持有点不均匀。很多东西你都需要回退到使用字体变化设置，然后你可以一次提供几个东西。这有点像字体功能设置。这是一种较低级别的语法，您可以在其中提供以逗号分隔的四个字母轴和值、下一个、下一个的列表。