Question

我在互联网上找不到任何相关文档。我只是将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声明中定义单词之间的宽度？

Answer 1

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

@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，这是空格字符。

我认为这种方法更好而不是调整word-spacing，因为即使使用了回退字体，它也能保持外观整洁。 Bebas的空间角色非常狭窄，你必须拥有word-spacing的非常大的值，这在其他大多数字体上看起来都很糟糕。

Answer 2

使用letter-spacing属性：

letter-spacing:2px;

font-face中的单词间距？

2 个答案: