본 사이트는 여러분의 사용자 경험을 개선하기 위해 유지 보수를 진행하는 동안 기능이 제한됩니다. 도움말로 문제가 해결되지 않고 질문을 하고 싶다면 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: