字体中的字间距？

发布于 2024-12-11 04:11:30 字数 584 浏览 1 评论 0原文

我在互联网上找不到这方面的任何文档。我只是将 Bebas 字体放在我的页面上，如下所示：

@font-face {
    font-family: 'BebasRegular';
    src: url('fonts/BEBAS___-webfont.eot');
    src: url('fonts/BEBAS___-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/BEBAS___-webfont.woff') format('woff'),
         url('fonts/BEBAS___-webfont.ttf') format('truetype'),
         url('fonts/BEBAS___-webfont.svg#BebasRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

但是，该字体的单词之间的间隙太小 - 有时很难看出一个单词在哪里停止，下一个单词在哪里开始。

是否可以在 font-face 声明中定义单词之间的宽度？

原文

I can't find any documentation for this on the internet. I just put the Bebas font on my page like this:

@font-face {
    font-family: 'BebasRegular';
    src: url('fonts/BEBAS___-webfont.eot');
    src: url('fonts/BEBAS___-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/BEBAS___-webfont.woff') format('woff'),
         url('fonts/BEBAS___-webfont.ttf') format('truetype'),
         url('fonts/BEBAS___-webfont.svg#BebasRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

However, the font has too small gaps between words - sometimes it is hard to see where one word stops and the next word begins.

Is it possible to define the width between words in the font-face declaration?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

氛圍 2024-12-18 04:11:30

您可以使用 unicode-range 在 @font-face 声明中忽略字体中的空格字符。然后，浏览器将使用后备字体来渲染空间。

@font-face {
    font-family: 'BebasRegular';
    src: url('fonts/BEBAS___-webfont.eot');
    src: url('fonts/BEBAS___-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/BEBAS___-webfont.woff') format('woff'),
         url('fonts/BEBAS___-webfont.ttf') format('truetype'),
         url('fonts/BEBAS___-webfont.svg#BebasRegular') format('svg');
    font-weight: normal;
    font-style: normal;

    unicode-range: U+0000-001F, U+0021-007F;
}

最后一行指定的范围是 Basic Latin（U+0000 到 U+ 007F)，跳过 U+0020，即空格字符。

我相信这种方法比调整字间距更好，因为即使使用后备字体，它也会使内容看起来干净。 Bebas 的空格字符太窄，以至于您必须为 word-spacing 设置一个非常大的值，这在大多数其他字体上看起来都很糟糕。

You can use unicode-range within the @font-face declaration to ignore the space character from the font. The browser will then render the space using a fallback font instead.

@font-face {
    font-family: 'BebasRegular';
    src: url('fonts/BEBAS___-webfont.eot');
    src: url('fonts/BEBAS___-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/BEBAS___-webfont.woff') format('woff'),
         url('fonts/BEBAS___-webfont.ttf') format('truetype'),
         url('fonts/BEBAS___-webfont.svg#BebasRegular') format('svg');
    font-weight: normal;
    font-style: normal;

    unicode-range: U+0000-001F, U+0021-007F;
}

The range specified in the last line is Basic Latin (U+0000 through U+007F), skipping U+0020, which is the space character.

I believe that this approach is better than adjusting word-spacing because it will keep things looking clean even if the fallback font is used. Bebas's space character is just so narrow that you have to have a really large value for word-spacing, which looks pretty bad on most other fonts.

回复收藏 0 原文