Photoshop 模拟字体与 HTML 中的不同

Posted 2023-03-15

【中文标题】Photoshop 模拟字体与 HTML 中的不同

【英文标题】：Photoshop Mock Up Font isn't same as in HTML

【发布时间】：2010-11-12 19:12:09

【问题描述】：

（html 初学者）

我已经为我想要制作的网站制作了一个 Photoshop 模型，但是我在模型中使用的文本在 Firefox 中查看时看起来不同。文本是 Arial 字体，大小 18pt 和常规粗细，我已经在 HTML 代码中实现了这一点，但看起来不同。

有没有办法让字体在 HTML 中看起来和在 Photoshop 中一样？

提前致谢:)

【问题讨论】：

您永远无法在模型和浏览器之间获得像素完美匹配。您永远不会在浏览器之间获得像素完美匹配。当谈到应用程序中的字体渲染时，有两个因素在起作用。 Windows 具有可以在应用程序级别启用的子像素渲染，应用程序将实现自己的子像素渲染，字体的默认内核可能会有所不同，无限......

【参考方案1】：

简短的回答是“不”。 Photoshop 的字体功能比网络浏览器多很多。它应用了各种平滑算法，您可以更好地控制字距、跟踪和间距。

每个浏览器和操作系统也有不同的渲染引擎，因此即使您可以在一个浏览器/操作系统组合中获得相同的渲染引擎，但在另一个浏览器/操作系统组合中看起来会有所不同。

但是，请查看所有CSS properties for text，看看您是否可以得到一些您可以接受的东西。如果没有，你最好的办法是从你的文本中制作一个图像，然后用好的“alt”文本等将它添加到你的页面中。

【讨论】：

HTML 渲染与 Photoshop 的抗锯齿渲染的差异不应成为使用图像而不是文本的理由。考虑增加的带宽并且不允许用户选择文本。

@womp：我知道这是一个非常古老的答案，但是对于任何访问这里的人，请停止粘贴指向 w3schools 的链接。

【参考方案2】：

我不确定您使用的是什么操作系统，但 Windows 和 Macintosh 有不同的字体系统。

This post by Joel Spolsky指出字体渲染基于哲学差异。

这就是你所看到的吗？请张贴图片，以便我们了解您在说什么。

【讨论】：

这是 Photoshop 模型 [IMG]i31.tinypic.com/wqx993.png[/IMG] 这是 Firefox 中显示的内容 [IMG]i32.tinypic.com/24o4zrd.png[/IMG] 我使用的是 Windows XP。

【参考方案3】：

字体是您在网络上根本无法获得的东西。如果您绝对必须控制字体的外观，那么您必须使用图像（并因此而被打败，这是正确的）。在 HTML 中实现像素完美的文本显示是不可能的。这从操作系统的字体差异开始，到浏览器布局引擎的差异结束。

【参考方案4】：

有两种方法：

获取该字体的图像并在布局中使用它。 使用自定义字体创建工具，如 SIFR 或 FLIR。这是一个棘手的选项 b/c 您需要拥有 Adob​​e Flash 并且您需要拥有字体的分发权（类似于书籍、音乐等）。

基本上，如果您想让它看起来完全一样并且仍然符合标准，这几乎是不可能的。

如果您正在寻找如何将 Adob​​e Photoshop 模型转换为 HTML 文档，您应该查看 CSS-tricks.com 上的 screencast series，该网站由非常有才华的设计师 Chris Coyier 运营（不，不是我 :) )。

【参考方案5】：

您必须了解的另一件事是，使用 Web 浏览器的人最终会控制您的页面的外观。因此，无论您为使网站以您想要的方式看到它做了多少摆弄，它在其他人的计算机上都会以不同的方式显示

【参考方案6】：

如果您需要完美、清晰的字体匹配，您可以使用 flash……但这会带来一大堆缺点。