HTML5嵌入式字体在浏览器中的呈现方式不同?

时间:2012-04-12 20:37:52

标签: html5 font-face embedded-fonts

我想让所有浏览器的页面看起来都一样。具体来说,我希望文本的包装点在所有浏览器上完全相同,这样我就能创建一个100%准确的PDF版本。例如,在FF vs. Chrome中查看此内容。

http://santaspencil.com/desktop/embedded-test/embedded-fonts-test.php

问题: - 可以吗? - 是否存在不需要用户下载插件的替代方案?

3 个答案:

答案 0 :(得分:1)

您应该考虑将字体文件嵌入到CSS中。但是像往常一样,石器时代的IE不能这样做,因为你需要在你的服务器上包含一个EOT字体文件。

http://base64fonts.com会将您的字体文件转换为base64,然后生成一个css代码供您复制并粘贴到您的html中。这将有助于确保跨浏览器(IE除外)的字体加载。

祝你好运

答案 1 :(得分:1)

  

...我希望文本的包装点在所有浏览器上完全相同...

在这里敲头(在砖墙上签名)。 Web技术甚至没有尝试这样做。如果您想办法提供自己的字体 - 例如嵌入式网页字体 - 您可以使SORTA使其正常工作。但如果100%是你的目标,你也可以放弃睡觉。

关于浏览器的一个巧妙之处是它们的“液体布局”能力,在平板电脑上自动呈现不同于桌面的页面,以填充不同的屏幕尺寸。您为此无限可再版性支付的价格之一是无法指定外观完全。此外,边缘情况总会出现并咬人。例如,如果可用行是0-73个单位,并且要放入的文本是74个单位长,它是否“适合”? (即零计数?并且正在用尽最后一个单位“适合”或需要“包裹”?)

让浏览器呈现完全外观的唯一方法是为他们提供他们看似是图像的内容。在屏幕上显示文本,截取屏幕截图并将屏幕截图设置为* .GIF是一种方法。

PDF文件也可以工作,因为浏览器看起来是一个带有自己渲染引擎的“搞笑”图像。即使浏览器不相同,大多数渲染引擎可能都是相同的(即来自Adobe的渲染引擎),因此它更有可能工作。在网上提供PDF文档效果非常好,并得到广泛支持。如果URL看起来像http://yoursys.yourdomain/yourpath/yourfile.pdf,大多数浏览器都会获取它并启动他们的PDF渲染工具并直接显示它...通常在浏览器窗口旁边,这样用户甚至不知道已经使用了不同的应用程序。

关于你问题的最后一部分,这是错误的问题。它应该是“不需要用户不具备的插件的解决方案”。 PDF插件的优势是已经拥有它的绝大多数用户。并非所有的插件都是邪恶的/不方便的......只是不那么常见的插件(如果您的目标是iPhone甚至不允许用户下载iPhone,则为Flash插件: - )。

祝你好运!

答案 2 :(得分:1)

这可能为时已晚,但直到今天我才知道这一点。有一种称为非中断空格的东西,在HTML中由 表示,您可以使用它来防止不必要的换行或其他类似的事情。维基百科有很好的写作。

http://en.wikipedia.org/wiki/Non-breaking_space