字体变得非常细
在 Photoshop 中，我的字体显示正常，但当我用 HTML 对其进行编码并在浏览器 (Chrome) 中测试它时，它显示非常细。这是我的意思的图片：
我必须在 CSS 中编写什么代码才能使其出现和Photoshop里的一样吗？ 请注意，Photoshop 中的字体没有任何样式。
In Photoshop my font turns up normal but when I code it in HTML and test it out in my browser (Chrome) it turns up very slim. Here is a picture of what I mean:
What do I have to code in CSS to make it turn up the same as it is in Photoshop? And note that the font in Photoshop hasn't got any styles on it.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
现在，您无法做太多事情来使其看起来与 Photoshop 中的一样。
此时此刻，支持必要 CSS 属性的浏览器并不多 。浏览器您希望如何呈现页面上的类型元素。
例如，某些 WebKit 浏览器支持类似于 的功能提议的
font-smoothCSS 属性 – 参见 Max Voltar 关于字体平滑的帖子。但是，始终值得记住的是，您的访问者并不是使用 Photoshop 来查看您的网站，因此您永远不要指望 Photoshop 结果的精确的逐像素副本会出现在浏览器中。
每个浏览器和操作系统及其组合都会以不同的方式呈现类型。关闭 ClearType 的 Windows、打开 ClearType 的 Windows、带 DirectDraw 的 IE9、Firefox、Chrome、Safari – 只要你能想到的，它们都会以不同的方式对待类型。如果您在多个平台上的多个浏览器上检查您的设计，您会看到这一点。
我的建议是：别担心。
此外，您的设计似乎正在使用 Myriad – 大概您正在使用
@font-face规则向系统上未安装 Myriad 的最终用户显示此内容。因为如果您不这样做，请做好准备，它看起来会更加不同。Right now, there's not a lot you can do to make it look the same as it does in Photoshop.
At this exact moment in time, there aren't many browsers that support the necessary CSS properties that tell the browser how you'd prefer the type elements on your page to be rendered.
For example, some WebKit browsers support something similar to the proposed
font-smoothCSS property – see Max Voltar's post on font-smoothing.However, it's always worth remembering that your visitors aren't using Photoshop to view your website, so you should never expect an exact pixel-for-pixel copy of your Photoshop results to appear in the browser.
Every browser and operating system – and the combinations thereof – render type differently. Windows with ClearType turned off, Windows with ClearType turned on, IE9 with DirectDraw, Firefox, Chrome, Safari – you name it, they all treat type differently. If you're checking your designs across multiple browsers on multiple platforms, you'll see this.
My advice: don't sweat it.
Additionally, your design appears to be using Myriad – presumably you're using a
@font-facerule to show this to end users who don't have Myriad installed on their system. Because if you're not, be prepared for it to look even more different.我认为您正在寻找以下内容：Photoshop Mock Up Font is'与 HTML 中的相同
您可以使用字体粗细。
Here's what I think your looking for: Photoshop Mock Up Font isn't same as in HTML
You can play with the font-weight.
您的 Photoshop 计算机上的操作系统版本是什么？您使用的 Chrome 版本是什么？是在同一台电脑上吗？你做过跨浏览器测试吗？
浏览器有时会自行渲染字体。众所周知，Safari 在 Windows 上以 Apple 风格的别名呈现其字体（不在最新版本中）。不同操作系统和不同浏览器的字体别名可能不同。
该字体必须存在于两个操作系统上。
像素大小也很重要。
字体平滑说明
浏览器字体渲染和抗锯齿 – Windows 与 Mac
Carl
What is the OS version on your Photoshop computer? What is the Chrome version you are using? Is it on the same computer? Did you do a cross-browser test?
Browsers sometime render the fonts themselves. Safari was known to render it's font with Apple-style aliasing on Windows (not in the latest release). Font aliasing can be different accross OS and accross browsers.
The font must exist on both OS.
Pixel size will also matter.
Font smoothing explained
Browser font rendering and antialiasing – Windows vs. Mac
Carl
使用图像而不是文本，这样每个人都会以同样的方式看到它。
Use images instead of text then everyone will see it the same way.