如何在Web跨平台上显示字体？

Question

我在CSS代码中使用字体大小的像素设置。 例如：

.items {
    font-family: Verdana, Arial;
    font-size: 14px;
    width: 100px;
}

我有个问题。 例如，在类.items元素中写有单​​词Hello words 。 元素适合100px并显示正常（在Ubuntu Linux中）。 但在Windows浏览器中，字体较宽，文本不适合100px，因此出现2行文本（我不想这样）

如何保护您的网站免受此类问题的困扰？ 如何确保元素中的每个文本都适合其容器？

Answer 1

Ubuntu系统是否安装了Verdana？ 根据我的经验，Verdana通常比Arial字体宽，因此可能是Linux系统在显示Arial，而Windows在显示Verdana？

如果你想确保两个系统都显示相同的字体，你需要使用CSS @ font-face ，现在它得到了很好的支持，特别是如果你使用类似'防弹语法'的东西 ：

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('webfont.woff') format('woff'), /* Modern Browsers */
     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

我不会因为让它们看起来完全一样而出汗太多 - 不同的平台会以不同的方式呈现不同的东西，所以你几乎肯定不会让它们完全相同。

Answer 2

您可以尝试通过设置足够大的宽度来防止此类问题。 但是，无法保证一定的宽度总是足够的，如果在大多数情况下该宽度足够，那么在许多情况下它会太大。

文本的宽度取决于很多东西，而不仅仅取决于字体大小（与宽度没有简单的关系） - 字体特征（字符的前进宽度），实际文本（例如，许多m与多个i），原则上字母间距和字间距也是如此。 它不依赖于操作系统，但不同的系统可能有不同的常用字体。 它间接依赖于语言，因为不同的语言使用不同的书写系统，因此字母的宽度可能会有很大差异。

使用em而不是px有几个好处，但它在这个问题上没有帮助。 em单位是字体的高度，不能用于评估字符的宽度。

所以你必须忍受这个。 例如，如果您希望设置一个垂直导航栏，其中链接（以类似按钮的方式或以其宽度可见的方式显示），单列表是实用的解决方案，因为它会导致所有单元格的显示宽度相等，由具有最大宽度要求的单元确定。