Chrome中的Arial [英] Arial in Chrome

问题描述

Chrome / Chromium中的Arial（也可能是其他字体）存在问题。
当我使用font-family：Arial时看起来不错，
但是当我通过@ font-face包含Arial字体文件时，它看起来不一样！
为什么会这样呢？我能做些什么使他们看起来一样？ Chrome的字体在哪里？
这里是我的CSS

@ font-face {
font-家庭：我的Arial;
src：url（Arial.ttf）格式（'truetype'）;
font-weight：normal;
font-style：normal;
}

body {
padding：20px;
font-size：16px;
}

body＃native {
font-family：Arial;
}

body＃fontface {
font-family：'My Arial';

$ / code $ / pre
$ b $ p

这是呈现的文本：

。

对不起对于我的英文，这不是我的母语。

解决方案

我使用@ font-face很多，不同的浏览器如何渲染它。有些字体变得非常难看，在你的特殊情况下，我认为差异是微不足道的，其他所有的东西就像Sparky672已经被评论过一样。

如果你绝对必须拥有所有系统上的像素精确相同的渲染，也许一些基于JavaScript的解决方案可能有所帮助，请检查：

https://stackoverflow.com/a/692994/525445

同样，如果这是我的网站在您的屏幕截图上， d

这只是网络的本质，不是每个人都会看到相同的东西，不同的显示器有不同的颜色设置，不同的显示器分辨率，一些人放大文本等。

只要提到这个选项，你可以用JavaScript检测Chrome，然后应用一些特定的CSS来调整它。

I have a problem with Arial (maybe other fonts too) in Chrome/Chromium. It looks good when I use font-family: Arial; But when I include Arial font-file via @font-face it looks different! Why could it be? What can I do to make them look the same? Where exactly Chrome takes its fonts? Here is my css

@font-face {
    font-family: 'My Arial';
    src: url(Arial.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    padding: 20px;
    font-size: 16px;
}

body#native {
    font-family: Arial;
}

body#fontface {
    font-family: 'My Arial';
}

Here is the rendered text:

.

Sorry for my English, it's not my native language.

解决方案

I use @font-face a lot, and there's always a difference in how different browsers render it. With some fonts it gets really ugly, in your particular case, I'd say difference is insignificant, and everything else just as Sparky672 already commented.

If you absolutely must have pixel-precise identical rendering on all systems, maybe some javascript based solution may help, check this:

https://stackoverflow.com/a/692994/525445

Again, if this was my site on your screenshots, I'd be perfectly happy with how it looks.

It's just the nature of the web that not everyone will see the identical thing, there are different monitors with different color settings, different resolutions, some people zoom in the text etc.

Just to mention the option, you can detect Chrome with JavaScript and then apply some specific CSS to tweak it.

这篇关于Chrome中的Arial的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！