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

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

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

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

===============>>#1 票数:2

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 */
}

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

===============>>#2 票数:1 已采纳

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

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

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

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

  ask by Larry Cinnabar translate from so

未解决问题?本站智能推荐: