我在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

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

9回复

在网络上,我应该使用什么字体来创建跨平台的等效体验?

因为Linux(及其变体)具有与Windows和Mac OS X完全不同的字体集,是否有任何人有任何创建跨平台字体系列的经验 - 理想情况下找到上述操作系统中常见字体的等价物? 如果是这样,最佳路线是什么?
1回复

Mac /赢得不同的字体垂直位置

我在页面上有非常简单的元素 - 这是一个篮子的数量气球,我无法正确设置。 不仅字体有明显的不同,而且它的垂直位置对于像这样的小元素显着不同: 我已经尝试了stackoverflow的一些解决方案(例如,从字体大小设置行高-1),但没有运气。 这是代码: HTML:
1回复

垂直对齐某些字体

用某些字体有问题。 例如Neo Sans W1G。 在不同的平台上,它们具有不同的垂直对齐方式。 在Linux和Mac OS上,字体升至顶部,但在Windows上,字体看起来很好。 我正在对Chrome,Safari和Firefox浏览器进行测试。 也许其他人遇到了这个问题?
4回复

CSS字体系列名称对哪些操作系统或浏览器区分大小写

根据sitepoint ( 我通常非常信任的来源 )指定font-family名称时,某些操作系统/浏览器可能 区分大小写 。 我通常总是使用混合大小写的值,但我想知道小写值是否会起作用? 我没有任何一种压倒性的偏好 - 但我讨厌一个页面呈现不同,因为我在CSS文件中的某处键入了一个
1回复

嵌入式网页字体,跨平台显示差异巨大

因此,我已经对此进行了数周的努力,但仍然找不到任何答案。 我使用的字体是League Gothic,并且尝试同时使用webkit方法和css @fontface方法,两者都给我相同的结果。 在Apple个人计算机和移动设备以及Andriod设备上,一切看起来都很完美,但是在Micro
1回复

Qt跨平台Windows和Mac:字体大小

我正在使用Qt框架在Windows和OS X上开发应用程序。 问题是我手动设置了一些小部件的字体大小(在ui设计器中)。 在Windows下,字体是完美的,但在osx上,它们太大了。 实际上,字体系列被转换(MS Shell Dlg 2转换为Lucida Grande),但不是字体大
1回复

QML跨平台设计的问题:文本大小

我一直在使用具有不同字体宽度和高度的不同操作系统(尝试使用Windows 7和Ubuntu 13.10)遇到麻烦。 我尝试设置pixelSize和pointSize,结果在Arial和Courier字体文本中都导致大小不同(Windows字体通常较大)。 这是一个例子: 这个矩形
1回复

哪些字体可能被视为网络的默认字体

好吧,基本上,该主题可以自言自语:在跨浏览器/平台,客户端Web开发中,我可以默认使用哪些字体?
1回复

Web应用程序的字体系列选择

我有一个现有的Web应用程序,已经针对Windows XP +,IE和Firefox进行了编码和测试。 我正在使用以下字体系列:Segoe UI,Verdana,Helvetica,Sans-Serif; 我们的客户喜欢Windows上的Segoe UI,但是我们发现字体在MacOS
2回复

如何在不同的操作系统中获取字体目录路径?

我正在开发一个用于生成CAPTCHA的模块。 此模块需要一个字体文件,但字体目录路径在不同的操作系统中是不同的。 是否有通用的方法来获取可在不同操作系统中使用的字体目录路径?