為了改善您的使用體驗,本網站正在進行維護,部分功能暫時無法使用。若本站的文件無法解決您的問題,想要向社群發問的話,請到 Twitter 上的 @FirefoxSupport 或 Reddit 上的 /r/firefox 發問,我們的社群成員將很快會回覆您的疑問。

搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

了解更多

Font rendering in Mac

  • 1 回覆
  • 1 有這個問題
  • 12 次檢視
  • 最近回覆由 guigs

more options

When I recently worked with Museo Sans Condensed from Typekit I realized that it looks very different across browsers, apps and OSes.

The biggest difference appears in Chrome and Firefox on Mac, where the font is rendered too bold. Also Sketch on Mac does the same. In Safari on the other hand the font looks "normal". I've prepared a little overview which showcases the differences with Museo Sans Condensed 900 in various environments: https://db.tt/emolAObK

If you look at the Windows browsers, or Photoshop or Affinity Designer, it looks (probably as intended) slightly less bold.

I've googled a bit and then and realized that the difference in Chrome and Mozilla on the Mac can be "switched off" by using "-webkit-font-smoothing: antialiased" and "-moz-osx-font-smoothing: grayscale" - then the rendering looks almost the same in all the browser, no matter if Mac over Windows. The problem in Sketch still appears however (I've already contacted their support for a statement).

So, the questions is now what the best thing to do is? Leave everything in its initial state and let every app/browser/OS render it differently? But then again, you can never be sure that the font looks the same everywhere. That's especially an issue with slightly lighter fonts, as Museo Sans 300 (not Condensed), which looks quite perfect in Sketch and in Chrome/Firefox on Mac, but is almost a little bit too thin in the rest of the world's apps.Also if you use the font on a darf background with light text. How can I design something, especially on the Mac, if things look so different here, so much different than in the wealth of all other devices, because even on iOS the font looks "normal" and not too bold.

What would you suggest - what would be your approach? Some clarification would be really appreciated.

When I recently worked with Museo Sans Condensed from Typekit I realized that it looks very different across browsers, apps and OSes. The biggest difference appears in Chrome and Firefox on Mac, where the font is rendered too bold. Also Sketch on Mac does the same. In Safari on the other hand the font looks "normal". I've prepared a little overview which showcases the differences with Museo Sans Condensed 900 in various environments: https://db.tt/emolAObK If you look at the Windows browsers, or Photoshop or Affinity Designer, it looks (probably as intended) slightly less bold. I've googled a bit and then and realized that the difference in Chrome and Mozilla on the Mac can be "switched off" by using "-webkit-font-smoothing: antialiased" and "-moz-osx-font-smoothing: grayscale" - then the rendering looks almost the same in all the browser, no matter if Mac over Windows. The problem in Sketch still appears however (I've already contacted their support for a statement). So, the questions is now what the best thing to do is? Leave everything in its initial state and let every app/browser/OS render it differently? But then again, you can never be sure that the font looks the same everywhere. That's especially an issue with slightly lighter fonts, as Museo Sans 300 (not Condensed), which looks quite perfect in Sketch and in Chrome/Firefox on Mac, but is almost a little bit too thin in the rest of the world's apps.Also if you use the font on a darf background with light text. How can I design something, especially on the Mac, if things look so different here, so much different than in the wealth of all other devices, because even on iOS the font looks "normal" and not too bold. What would you suggest - what would be your approach? Some clarification would be really appreciated.

所有回覆 (1)

more options

I understand that you have created many scales for how a particular font, Museo Sans Condensed from Typekit is rendered on different devices, operating systems, and browsers. I also understand the biggest difference appears in Chrome and Firefox on Mac, where the font is rendered too bold.

Fonts are loaded from the local font type installed on the user's computer. I would suggest asking stackoverflow.com for a more immediate solution to this. However there is Layout: Text component in bugzilla.mozilla.org for further investigation on the css. This is where we can provide support for using Firefox and its basic features.


Other insights: