规范OSX和Windows之间的字体大小

时间:2021-05-23 12:47:37

I've read that OSX and Windows have two very different algorithms for rendering fonts. As such, it's a common issue that web fonts look "heavier" when viewing them in OSX than they do in Windows.

我听说OSX和Windows有两种非常不同的渲染字体的算法。因此,在OSX中查看web字体比在Windows中查看字体“更重”是一个常见的问题。

For example, this is the same font, on the same site, in the same browser, but on different operating systems:

例如,这是相同的字体,在相同的站点,在相同的浏览器,但在不同的操作系统:

规范OSX和Windows之间的字体大小

Here's Arial exhibiting similar differences:

这里的Arial也有类似的区别:

规范OSX和Windows之间的字体大小

Is there any way of altering the rendering of fonts in either Windows or OSX so they look closer to each other? Or is there some other technique to deal with this difference?

在Windows或OSX中,有没有什么方法可以改变字体的渲染,让它们看起来更接近?还是有其他的方法来处理这种差异?

1 个解决方案

#1


11  

That font is a particularly bad example, I deal with a lot of fonts and have never seen one look like that. Keep in mind that people are used to seeing their fonts rendered a certain way on their own machines, and thus it is not your job to dictate how fonts should be rendered.

那种字体是一个特别糟糕的例子,我处理过很多字体,从来没有见过这样的字体。请记住,人们习惯于看到自己的字体在自己的机器上以某种方式呈现,因此决定字体应该如何呈现不是你的工作。

A few things to keep in mind are to only use weights you've included, for example, do not use font-weight: bold on a custom font-face if you haven't actually included the bold version of that font. "Browser bold" always looks messed up compared to the actual bold font.

需要记住的一些事情是,只使用包含的权重,例如,不要使用字体权重:如果没有包含该字体的粗体版本,则在自定义字体的字体上使用粗体。与实际的粗体字体相比,“浏览器粗体”看起来总是一团糟。

Also, for some fonts, I find that I need to change the font-smoothing property for webkit browsers, as the default (subpixel-aliased) can look a little heavy. You can add this property to any element that uses the problematic font (even the body, if required).

另外,对于一些字体,我发现我需要修改webkit浏览器的字体平滑属性,因为默认的(子像素化的)看起来有点重。您可以将此属性添加到任何使用问题字体的元素(如果需要,甚至是正文)。

-webkit-font-smoothing: antialiased;

#1


11  

That font is a particularly bad example, I deal with a lot of fonts and have never seen one look like that. Keep in mind that people are used to seeing their fonts rendered a certain way on their own machines, and thus it is not your job to dictate how fonts should be rendered.

那种字体是一个特别糟糕的例子,我处理过很多字体,从来没有见过这样的字体。请记住,人们习惯于看到自己的字体在自己的机器上以某种方式呈现,因此决定字体应该如何呈现不是你的工作。

A few things to keep in mind are to only use weights you've included, for example, do not use font-weight: bold on a custom font-face if you haven't actually included the bold version of that font. "Browser bold" always looks messed up compared to the actual bold font.

需要记住的一些事情是,只使用包含的权重,例如,不要使用字体权重:如果没有包含该字体的粗体版本,则在自定义字体的字体上使用粗体。与实际的粗体字体相比,“浏览器粗体”看起来总是一团糟。

Also, for some fonts, I find that I need to change the font-smoothing property for webkit browsers, as the default (subpixel-aliased) can look a little heavy. You can add this property to any element that uses the problematic font (even the body, if required).

另外,对于一些字体,我发现我需要修改webkit浏览器的字体平滑属性,因为默认的(子像素化的)看起来有点重。您可以将此属性添加到任何使用问题字体的元素(如果需要,甚至是正文)。

-webkit-font-smoothing: antialiased;