为什么浏览器文本在特定浏览器/机器上会更大?

时间:2009-03-25 06:01:41

标签: html css

在我制作的网站上,有人给我发了一个屏幕截图,上面显示我的字幕字体太大了。

  • 我用FF,IE6,IE7,IE8,Safari / win,opera / win检查了两台机器(Vista)上的网站。
  • 我可以增加浏览器的字体大小,但是字幕保持相同的大小(因为它是8pt,如下所示),这就是我想要的(所以它不会在徽标下面扩展)。
  • 它在http://browsershots.org上的34个浏览器屏幕截图中检出正常。

在这个人的机器上可能导致字体变大的原因(Windows XP,IE7)。他说“所有其他网站看起来都很好”。是否有关于Windows XP的操作可以使操作更改浏览器中的字体大小等?或者在Windows XP上出现arial / italic问题?

以下是CSS:

#subtitle {
    position: absolute;
    top: 78px;
    left: 40px;
    width: 738px;
    text-align: right;
    font-size: 8pt;
    font-style: italic;
    font-family: arial;
}

解答:

我将“8pt”更改为“10px”,现在可以为他工作了。我认为他已经改变了他机器上的DPI。

6 个答案:

答案 0 :(得分:5)

您使用'pt'作为尺寸单位。不要那样做。 CSS'物理单位'(pt,mm,in ...)仅对物理输出有意义(即打印样式表)。

在屏幕上,使用系统的“dpi”设置将点映射到像素,这些设置可以跨机器任意变化。 Macs / Windows / Linux的默认设置不同,可以重新配置。许多Windows用户增加dpi设置以调整定点大小系统对话框(shell)字体的大小。

如果你必须对某些文字使用非相对单位,你想要的单位是'px'。

还有其他原因可以改变字体大小(例如,不同的字体可用性,最小字体大小设置,有意的字体缩放),这就是为什么你永远不应该完全依赖它们是你期望的,但这几乎肯定是原因在这种情况下。

答案 1 :(得分:3)

这可能是一个愚蠢的问题,但是用户无意中改变了浏览器的字体大小?在IE6以上,按住CTRL并向前/向后滚动鼠标滚轮将增加/减少字体大小。

答案 2 :(得分:2)

三种可能性:

  1. 用户已更改其机器的DPI设置。在某些版本的Windows中,这表现为将字体更改为“大”或“非常大”;
  2. 用户在浏览器中更改了默认字体(例如,从Tahoma / 12改为Firefox中的Tahoma / 16);或
  3. 用户已在其浏览器中禁用了CSS / HTML字体大小调整。这是一个辅助功能设置。有些人也会使用它,例如,在15英寸笔记本电脑上拥有1920x1200分辨率,而某些Web weenie在其网站上将字体大小设置为8像素高。

答案 3 :(得分:2)

抱歉,bobinceDiogenes,但我必须以最强的方式不同意你,不使用pt尺寸并始终使用像素:

设计师希望字体大小相对为浏览器或操作系统设置中指定的默认大小(应该是标准),应使用 EM 即可。想要绝对大小(在屏幕上)的设计师应该使用 pt 来保持字体大小不变,无论屏幕的DPI设置如何,这就是原因:

现代笔记本电脑和移动设备的屏幕比台式电脑的像素密度更高,与桌面电脑72相比,自然(默认)分辨率高达约150dpi。医疗和其他专业屏幕甚至更高。并且用户有能力(如果不总是知识的话)提高或降低逻辑dpi以根据他的偏好和视觉能力定制显示。

以像素为单位的任何图片或文字都太小,无法在密集dpi设备上阅读,这会让您的有视力的用户感到困难,并且让任何视力不佳的用户无法阅读文本。更重要的是(并且有人可以争论这是否是正确的行为),某些浏览器即使在用户命令时也不会调整像素大小的文本,使得情况不可修复。

与纸质介质不同,其中精度为100英寸的位置是可能的,每个阅读设计师作品的人都会看到相同尺寸的纸张,用于访问网络的设备的多样性使像素完美设计的整个概念无效,它只在它所针对的一个设备上看起来很好。 Web上的设计要点是让目标受众可以访问该站点,这通常应该尽可能大,并且将使用一系列设备和设置。

操作系统已经在那里使用矢量UI元素,或者至少是平滑缩放的大型源位图。所以,你应该忘记称为“像素”的任意度量单位,并使你的设计与最广泛的接入设备兼容。


附录 - 增加points raised by Diogenes

不幸的是,在当前流行的操作系统中,具有DPI感知(并因此适当支持pt大小的文本)的真实情况是,由于缺少更强的可打印单词,因此{{{ 3}}:

  

不幸的是,大多数计算机都不知道[显示器的DPI],因此浏览器也不知道......在没有这些知识的情况下,操作系统和浏览器通常只做假设,而这些假设通常是错误的。

因此,虽然理论上点是固定文本的最佳单位,但在实践中使用它们今天在许多OS /浏览器/屏幕配置中产生不一致的结果。因此,设计师经常不得不放弃并恢复像素以实现固定的字体大小。就个人而言,我使用百分比和ems,完全避免固定大小。

CSS-Discuss档案有一个很棒的CSS-Discuss Wiki,还有很多指向细节和各种方法的链接。

答案 4 :(得分:1)

在IE7上有缩放级别和文本大小。最可能的情况是他们无意中更改了其中一个设置。让他们单击“页面”按钮,然后查看“缩放”和“文本大小”设置。

答案 5 :(得分:1)

正如其他2个答案所示,DPI设置可能会给您带来麻烦。我发现,一旦考虑DPI设置和不同的浏览器默认字体,将pt,ex,em与px大小混合可能是一个真正的挑战。

所以现在我只使用px来表示字体大小。大多数问题都消失了。

P.S。不要强迫该单个用户返回常规DPI。我愿意打赌他们年纪大了,需要老花镜,他们拿到的新型高分辨率显示器因为印刷品太小而难以阅读。有人调整了DPI,现在字体与旧显示器的尺寸相同,所以现在他们确实更喜欢新显示器。现在的问题是一些网页搞砸了。这就是你进来的地方。

将显示器从CRT更改为平面屏幕时,您可能需要注意的另一件事是数字字体平滑设置。模糊字符变得更清晰。幸运的是,这不会影响您的网页。


附录 - 解决MaxVT

提出的问题

MaxVT在他的回答中提出了一些很好的观点。语境肯定很重要。

我的回答有点懒惰和不完整。我使用px的原因是因为浏览器之间的不一致。根据我的想法,指定一个点大小应该指定用户在他正在使用的设备上的物理大小,但实际上并没有。

例如,假设你是font-family:cursive; font-size:11pt

在Windows下的大多数浏览器中,默认使用备受诟病的MS-Comic字体。 IE7决定使用其他一些默认值,并且该字体看起来更小,并且在相同的点大小下可读性更低。 Arial vs. Verdana字体也是如此。指定相同的磅值,整个布局会发生变化。在设置时输入DPI设置,它很混乱。

每英寸点数(DPI)设置有点不合时宜。您的显示器或手机具有固定的DPI。只有获得新的显示器或手机才能更改它。有一个更改DPI的对话框只是因为设备没有向操作系统报告DPI是什么。这是一个不完美的世界。

所以我给你留下这个建议 - 现在使用px指定字体大小,但只使用一次。制作相对于基本字体的所有其他尺寸。

然后,当您必须将所有内容移植到最新的BlackBerry或iPod上时,可以轻松地从11px切换到11pt。并测试你的软件,以便在增加字体大小时看起来很棒。

相关问题