为什么@font-face的字间距（letter-spacing）不起作用？

Question

我正在开发一个多语言网站，使用@font-face来显示缅甸字体。 除了字距之外，一切看起来都很好。因此，我尝试在@font-face内插入字距。但是它没有效果。在body或html或container中使用letter-spacing也会将其他字体的字距推开，这不是我想要的。我只想增加Zawgyi-One字体的字距，如下所示。

@font-face {
    font-family: 'Zawgyi-One';
    src: url('/fonts/Zawgyi-One.eot');
    src: url('/fonts/Zawgyi-One.eot?iefixa') format('eot'),
         url('/fonts/Zawgyi-One.woff') format('woff'),
         url('/fonts/Zawgyi-One.ttf') format('truetype'),
         url('/fonts/Zawgyi-One.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
    unicode-range: U+00-FF, U+980-9FF;
    letter-spacing: 0.30em!important;
}

- yogi

Answer 1

根据Mozilla文档，似乎不能在字体定义的一部分中支持letter-spacing。

话虽如此，我建议先定义字体，然后定义一个应用于具有该字体族声明的对象的类。

例如：

.zawgi-one {
  font-family: 'Zawgi-One';
  letter-spacing: 0.30em !important;
}

- user1932079

---

如果您正在使用SASS，您也可以利用@extend来实现这个效果 :) - Terry

但我将在同一页面中使用多种字体，还有更多。所有页面都是许多字体的组合。我的意思是，同一个位置可能会有Arial、Zwagi-One、Helvetica Neue等字体。所有这些内容都是由用户从前端输入到数据库中的，因此无法单独控制它们。有什么建议吗？ - yogi

我不知道你的意思。一个字符不能以多种字体显示。如果页面有这个字母间距的区域，请应用它（尽管这似乎是个坏主意，因为每种字体都不同）。 - user1932079

我只想在页面中任何显示Zawgyi-One字体的地方增加字母间距，而保持其他字体的字母间距不变。 - yogi

你目前应用了那种字体，对吧？无论你在设置字体时做了什么，都可以调整一下以添加该类。 - user1932079

@JeremyMiller 他的意思是在 font-family 中有几种备选字体，只有其中一种需要使用 letter-spacing。考虑使用 Segoe UI 并搭配 Open Sans 的替代字体：第二种需要 -0.02em 的间距才能兼容。 - polkovnikov.ph