我正在开发一个需要或多或少像素完美的 HTML页面,我注意到在Opera 10中,字体渲染比在其他浏览器中更大,即使字体大小实际上是相同的.

请参阅Opera 10中的此示例页面以及Firefox 3.6等其他浏览器：

http://troy.onespot.com/static/stack_overflow/opera_font_size.html

或者,这是一个说明问题的屏幕截图：

http://skitch.com/troywarr/d47m1/font-size

“50px”和“46px”文本背后的红色框(两者都具有相应的字体大小)都具有50px的高度.

在Firefox 3.6中,“50px”中“p”的下行与其后面的红色框的底部对齐.在Opera中,“50px”中“p”的下降位于下方;它是“46px”,更接近Firefox中的“50px”.这告诉我,Opera正在渲染10％太大的字体.

这与其他正文文本的问题完全相同,在Opera 10中完全抛弃了我的页面布局.如果您对可能导致此问题的原因有什么想法,或者至少如何预防/修复它,请告诉我.

谢谢！

更新：

看来我没有安装Helvetica的正确副本 – 我从字体堆栈中删除了它,并且在我的测试页面上看到的渲染文本没有区别.

我更新了测试页面只使用通用的“sans-serif”字体系列,所以希望我们现在都看到同样的事情.

有趣的是,使用通用的“serif”字体在Opera和Firefox中显示完全相同.

这个问题可能只是一个关于Opera如何显示通用“sans-serif”字体的怪癖？

更新2：

这可能很重要：我使用的是Mac OS X SNow Leopard.我现在正在尝试其他字体,看看我是否可以进一步隔离这个问题.

更新3：

我使用Arial创建了另一个测试页面：

http://troy.onespot.com/static/stack_overflow/opera_font_size_reset_arial.html

现在Opera和Firefox几乎完全匹配！

在这个项目中,我可能会使用Arial代替Helvetica.据我所知,我有一个完整的OS X版本的Helvetica – 所以我不能在不同的用户看到我的页面上的字体之间有任何差异.我会坚持尝试过的&真正的Arial.

但是,这可能是什么意思 – OS X的默认sans-serif字体在Opera中是否会奇怪地呈现出来？

我怀疑Opera使用与其他浏览器不同的Sans-serif后备字体.应该可以通过使用系统上明确安装的其他字体来确认或消除.

我写了一个基本的HtmlHelper。这是我写的一个测试，简化了我正在做的事情，并提供自我保证，当我使用StringBuilder和TagBuilder对象时发生这种情况：

public static string HelloWorld(this HtmlHelper htmlHelper,string name)
{
    var sb = new StringBuilder();
    var builder = new TagBuilder("span");
    builder.InnerHtml = "Hello," + name + "!";
    sb.Append(builder.ToString(TagRenderMode.normal));
    sb.Append("<br/>");

    return sb.ToString();
}

该控件的输出对字符串进行编码，所以我看到以下内容：
< span> Hello，Jason！< / span>< br />

在我看来，我使用的是：@ Html.HelloWorld(“Jason”)

任何想法我可以做错什么？

Razor引擎默认情况下会在其呈现的任何字符串中转义HTML。如果将返回类型更改为IHtmlString，则不会发生。

public static IHtmlString HelloWorld(this HtmlHelper htmlHelper,string name)
    ...
    return new HtmlString(sb.ToString());
}

我想知道为什么我的桌面和 Android(默认浏览器,Chrome,在最新的系统上)的字体大小可能会有所不同.

总之,< p>中的字体大小(段落)在Android上太大了.

我用的是CSS reset stylesheet (article in french).

Linux上的Firefox 25.0

您可以看到Lorem ipsum段落的文本减少了(相对于页面文本).标题有更大的文字.

Android Chrome(裁剪)

Lorem ipsum段落中文本的大小接近标题的大小.为什么Chrome不会显示较小尺寸的文字？

例

请参阅jsfiddle：edit,fullscreen和fullscreen without jsfiddle bar.

你可能会在Chrome for Android中遇到这个 known issue.相关文字如下：

Font size is inconsistent on some sites,such as Reddit and T-Mobile.

We’re working on improving the display of non-mobile sites on phones,especially ones that use a large range of styles and fonts.

我正在创建一个 HTML电子邮件模板.桌面版本使用表格,几个内联css,所有大小都以％或px值定义.

对于移动版本,我使用div和css.现在我想根据视口宽度调整一些文本的大小.因为如果我将某个标题的字体大小定义为28px,那么某个文本在更宽的设备上看起来可能正常,但在较小的设备上,文本会变大并且会中断到下一行.

现在我正在考虑像这样设置基本字体大小：
(以完整页面模式运行代码段,然后调整窗口大小以查看效果)

:root {
  font-size: calc(8px + 4vw);
}

<h1>
  Header 1
</h1>
<h2>
  Header 2
</h2>
<p>
  Lorem ipsum dolor sit amet,quo eripuit menandri instructior ad,nostro iracundia nam at. Etiam quaerendum vis no. Percipit accommodare ne eum. Alia molestie democritum vix no,natum habemus ei eum,qui ut adhuc partem luptatum.
</p>

像这样,随后的字体大小根据视口宽度进行缩放,标头在较小的设备上变小,防止文本中断,或者至少使其不太可能.通过使用calc()我也定义了一定的最小值,因此文本不会变得太小.

现在我的问题是,将它用于电子邮件(移动)是否可以,或者是否受到移动电子邮件客户端的严重支持？浏览器支持非常好,但我找不到有关移动电子邮件客户端支持的任何信息.

嗨,您可以随时查看 http://caniuse.com上对css属性的支持.我发现： http://caniuse.com/#search=vw显示了iOS 8.4和Android 4.4及以上的支持.不是很好,我想很多人还在iOS7上(好吧,也许只是我！).

总之,我同意你可能不应该依赖这种技术到处工作.