Geek Answers Handbook

Hard Font on Windows - Chrome & Safari

I use custom fonts on my web page using the following code:

@font-face {
    font-family: 'HelveticaNeueBold';
    src: url('fonts/HelveticaNeueBold.eot');
    src: url('fonts/HelveticaNeueBold.eot?#iefix') format('embedded-opentype'),
         url('fonts/HelveticaNeueBold.woff') format('woff'),
         url('fonts/HelveticaNeueBold.ttf') format('truetype'),
         url('fonts/HelveticaNeueBold.svg#HelveticaNeueBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

This works fine in all browsers on a Mac, but looking at it on a PC in Chrome and Safari, it looks jagged. Are there any fixes that I could use to make everything look the same? Below is the difference (Mac on the left, PC on the right - like in Chrome).

enter image description here

+5
source share
7 answers
Fonts

@ font-face on PCs usually look a little bigger, but “Hinting” fonts will improve readability.

Try running fonts through the squirrel font converter, which can handle hints as part of the conversion.

http://www.fontsquirrel.com/fontface/generator

@font-face Helvetica , , Arial. , .

+4

, Chrome , SVG font-face CSS @. @font-face {...} CSS:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'HelveticaNeueBold';
    src: url('fonts/HelveticaNeueBold.svg') format('svg');
  }
}

@media webkit , .SVG. Windows Chrome.

: Chrome Windows 7 8, : Chrome Windows. , , . :

Chrome

+2

:

-webkit-transform: rotate(-0.0000000001deg);

, . , , .

: https://twitter.com/#!/komejo/statuses/117241707522818048

+1

, . , cufon .

0

, , ClearType .

XP: . . , ClearType .

.

0

This is the fundamental difference between the way Windows and OS X handle font rendering, so there is little you can do. One hacker fix for Chrome adds an almost invisible shadow ( text-shadow: rgba(0, 0, 0, .01) 0 0 1px), which causes it to smooth text. Services such as Typekit are working hard to fix the problem, such as serving fonts in the form of Postscript outlines , but that doesn't really help your problem.

0
source

This seems like a trick:

html {
    -webkit-text-stroke-width: .10px;
}
0
source

More articles:


All Articles