时间戳

首页 > 解决方案 > 如何对可变字体的外边缘设置约束？

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

问题描述

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

代码笔

.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
}

标签： htmlcsstypography

解决方案

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

这是我的想法。

有时我会使用指南来了解幕后的真实情况。尝试添加这些 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>

这应该可以让您看到字形之前和之后有一个空间，该空间也随着动画的扩展和收缩。

在排版中，这个空间被称为“侧轴承”。此空间是字形的不可编辑组件。此外，字形在字形的前缘（左）上可能具有与在后缘（右）上不同的侧轴承。

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

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

解决方法：

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

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

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

推荐阅读