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

Question

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

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>

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

在排版中，这个空间被称为“side-bearing”。此空格是字形的不可编辑组件。此外，字形在字形的前缘(左)和后缘(右)可能有不同的边距。

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

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

解决方法:

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

2。切换到具有统一边距的不同字体。如果您使用品牌特定字体并被迫使用特定字体，这可能是不可能的。

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