如何对可变字体的外边缘设置约束？

Question

我正在使用 HTMl 和 CSS 为客户创建我的第一个可变徽标。我创造了我想要的效果，第一个字母随着第二个收缩而扩展但是；我的角色的外边缘也稍微向内和向外移动。我做错了什么导致这种情况发生，或者我可以添加什么来锁定外边缘的点以阻止这种情况发生？

CodePen

.em-tight { letter-spacing: -1.5em; }
@font-face {
  font-family: 'etc-trispace';
  src: url(data:font/woff2;base64,d09...) format('woff2-variations');
}

body {
font-family: 'etc-trispace';
text-rendering: geometricPrecision;
margin: 10vh auto;
text-align: center;
overflow: hidden;
}

@keyframes bigger {
0%   {font-variation-settings: "wght" 200, "wdth" 50 ; }
25%   {font-variation-settings: "wght" 200, "wdth" 200; }
50%   {font-variation-settings: "wght" 200, "wdth" 200; }
75%   {font-variation-settings: "wght" 200, "wdth" 50;  }
100% {font-variation-settings: "wght" 200, "wdth" 50 ;}
    }

p span {
    animation: bigger infinite;
    animation-duration: 5s;
    animation-timing-function: ease;
    font-size: 40vh;
    margin: 0 auto;
    line-height: 1;
    font-weight: normal;
    }

p span:nth-child(2) {
animation-delay: 2.5s
}

Answer 1

这是一个令人印象深刻的动画。

这是我的想法。

有时我会使用指南来了解引擎盖下的真实情况。尝试添加这些 CSS 边框以进行故障排除：

p span:nth-child(2) {
  animation-delay: 2.5s;
  border:thin dashed red;
}
p span:nth-child(1) {
  border:thin dashed green;
}

然后，尝试每个 span 中具有相同字符的动画。使用 H 或 M 等具有不同几何形状的字符来为您提供更多信息：

<p class="em-tight"><span>O</span><span>O</span></p>

这应该让您看到字形前后有一个 space 也随着动画扩展和收缩。

在排版中，这个 space 被称为 "side-bearing"。此 space 是字形的不可编辑组件。此外，字形在字形的前缘（左）和后缘（右）可能有不同的边距。

我们的参考线边框向我们展示了您的动画中的边距也在随着字形扩展和收缩，并且 left/right 方位不相等。因此，间距的不均匀性。

在 CSS 中，我们有一些工具可以手动调整单个字母的间距（字距），例如 letter-spacing 属性。我相信您遇到的问题是这样的 letter-spacing 尚未与您在动画中使用的 font-variation-settings 集成。

解决方法：

1。您可以将这些字形转换为轮廓图像并删除边距。然后，您可以将其替换为您可以控制的间距。如果您没有真正需要在动画中实际使用类型，这将起作用。如果动画是一个标志，正如你上面所说的，那么 D 和 H 可以以你呈现的形式传递给搜索引擎或浏览器没有任何意义。给定所提供的信息，这将是我的第一个首选解决方案。一个原始的动画 GIF 可以很快完成这项工作。

2。切换到具有统一边距的不同字体。如果你——正如我怀疑的那样——使用品牌特定的字体并且被迫使用特定的字体，这可能是不可能的。

3。如果您有权访问资源，则可以重新切割类型 — 至少需要两个字符。这些资源可能是您自己对字体编辑软件的了解，或者是聘请字体设计师的预算。还必须考虑型号许可证。

如何对可变字体的外边缘设置约束？

How to set restraints to the outer-edges of variable typefaces?

html

css

typography