Photoshop Mock Up 字体与 HTML 中的字体不同
（HTML 初学者）
我已经制作了我想要制作的网站的 Photoshop 模型，但是在 Firefox 中查看时，我在模型中使用的文本看起来有所不同。 文本是 Arial 字体，大小 18pt，常规粗细，我已将其实现为 HTML 代码，但它看起来不同。
有没有办法让 HTML 中的字体与 Photoshop 中的字体看起来一样？
提前致谢 ：）
(Beginner to HTML)
I have made a Photoshop mock-up of the website I want to make, but the text I have used in the mock-up looks different when viewed in Firefox. The text is Arial font, size 18pt and regular weight, and I have implemented this into HTML code, but it looks different.
Is there a way to make the font look the same in HTML as it does in Photoshop?
Thanks in advance :)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
最简洁的答案是不”。 Photoshop 比网络浏览器拥有更多的字体功能。 它应用了各种平滑算法，您可以更好地控制字距调整、跟踪和间距。
每个浏览器和操作系统也都有不同的渲染引擎，因此即使您可以在一种浏览器/操作系统组合中获得相同的渲染引擎，在另一种浏览器/操作系统组合中它看起来也会有所不同。
但是，请查看所有文本的 CSS 属性，看看是否可以获得您想要的东西重新能够忍受。 如果没有，最好的选择是从文本中制作图像，然后将其添加到带有良好“替代”文本等的页面中。
The short answer is "no". Photoshop has a lot more font functionality than a web browser. It applies all kinds of smoothing algorithms, and you can control kerning, tracking and spacing much better.
Each browser and OS has a distinct rendering engine as well, so even if you could get it the same in one browser/OS combination, it would look different in another.
However, check out all the CSS properties for text to see if you can get something you're able to live with. If not, your best bet is to just make an image out of your text and add it to your page with good "alt" text and such.
我不确定你使用的是什么操作系统，但 Windows 和 Macintosh 有不同的字体系统。
Joel Spolsky 的这篇文章 指出字体渲染基于哲学差异。
这就是你所看到的吗？ 请发布图片，以便我们了解您在说什么。
I'm not sure what OS you're on, but Windows and Macintosh have different font systems.
This post by Joel Spolsky points out that the font rendering is based on philosophical differences.
Is that what you're seeing? Please post images so we can see what you're talking about.
字体是您无法在网络上正确获取的东西。 如果你绝对必须控制字体的外观，那么你就必须使用图像（并且因此而受到打击，这是正确的）。 在 HTML 中实现像素完美的文本显示根本不可能。 这始于操作系统所具有的字体差异，并以浏览器布局引擎的差异结束。
Fonts are something you simply can't get right on the web. If you absolutely have to control the look of fonts, then you have to use images (and get beaten for it, rightly so). It's simply not possible to achieve pixel-perfect text display in HTML. This starts with differences in fonts the operating system has and ends with differences in browser layout engines.
有两种方法可以做到这一点：
基本上，如果你想让它看起来完全相同并且仍然符合标准，这几乎是不可能的。
如果您正在寻找如何将 Adobe Photoshop 模型转换为 HTML 文档，您应该查看 CSS-tricks.com 上的截屏系列，由 Chris Coyier 运营，他是一位非常有才华的设计师（不，这不是我:)）。
There are two ways to do it:
Basically, if you want to have it look exactly the same and still stay standards compliant, this is really almost impossible.
If you're looking for how to turn Adobe Photoshop mockups into HTML documents, you should check out the screencast series on CSS-tricks.com, run by Chris Coyier, a very talented designer (no it's not me :) ).
您必须了解的另一件事是，最终控制页面外观的是使用 Web 浏览器的人。 因此，无论您做了多少努力才能以您想要的方式查看网站，它在其他人的计算机上的显示方式也会有所不同
Another thing that you will have to understand is that it is the people with the Web browsers that ultimately control how your page will look. So no matter how much fiddling you do to get a website the way you want to see it, it will view differently on someone else's computer
如果您需要完美、清晰的字体匹配，您可以使用 Flash……但这会带来很多缺点。
If you need perfect, crystal clear font matches you can use flash... but that comes with a whole boatload of downsides.