Question

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

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

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

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

Answer 1

Ubuntu系统是否安装了Verdana？根据我的经验，Verdana通常比Arial更宽泛，所以可能是Linux系统显示Arial，而Windows正在显示Verdana？

如果你想确保两个系统都显示相同的字体，你需要使用CSS @font-face，现在它得到了很好的支持，特别是如果你使用像'bullet-proof syntax'这样的东西： / p>

@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与许多相比）我是），原则上字母间距和字距也是如此。它不依赖于操作系统，但不同的系统可能有不同的常用字体。它间接取决于语言，因为不同的语言使用不同的书写系统，因此字母的宽度可能会有很大差异。

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

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

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

2 个答案: