Arial in Chrome

问题:

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.

回答1:

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.

回答2:

Is the Arial file you're including with @font-face the same exact file from your system or did you get it from somewhere else? There could be difference in the files that's causing the difference. If not, then as @Sparky672 said in his last comment, there's not much you can do, it's just a browser rendering issue.

Also, out of curiosity, why are you including Arial with @font-face, since it's available on virtually every system?