Font rendering mac os

Сглаживание шрифтов для разработчика и пользователя на Mac OS

Я давно интересовался сглаживанием шрифта для веб страниц на CSS. Но «волшебные» свойства, такие как -webkit-font-smoothing , не работали на моем Win 7. Поэтому никакого смысла в этих css свойствах я не видел. Но сейчас у меня Mac OS и они работают! Сразу скажу я проверял только Win 7, может в более поздних версиях эти свойства тоже хоть как-то работают.

Используем в работе

Очень хорошо этим свойством обрабатываются подгружаемые шрифты.

Вот и все, больше ничего не нужно. Теперь ваш сайт стал чуточку красивее и элегантней, хоть это и не так заметно с первого взгляда.

Используем в браузере как пользователи

Для этого вам нужно установить расширение для Chrome / Firefox — Stylish.

В настройках создать новый стиль (write new style), назвать его (у меня Font render), поставить галочку Enable , и в поле code вставить следующий текст:

И нажать на кнопку сохранить (save). Теперь можно закрыть это окно и сглаживание будет по умолчанию включено на всех сайтах. Я именно так и сделал 🙂

Еше можно подписаться на email рассылку новых заметок. Не чаще раза в неделю, без спама.

Адекватное подчеркивание ссылок

Как исправить поведение text-decoration: underline

За и против. Оформление незагруженных изображений.

Незагруженные изображение — не та проблема, которую нужно срочно решать. С изображениями есть другая, более важная, проблема.

Управляем поведением font-face в CSS

Поведением текста, отображаемого во время загрузки font-face, можно управлять с помощью свойства font-display. Как работает и какие значения поддерживет свойсто font-display читайте в статье.

Старт курса по архитектуре JavaScript приложений в SmartJS академии

Краткое содержание вводной лекции курса по архитектуре современных JavaScript приложений в SmartJS академии

Источник

How to fix the font rendering on macOS 10.14 Mojave

…and make it look like High Sierra’s.

With macOS Mojave, Apple disabled a feature called “Subpixel antialiasing”. Apparently, it is some complex, legacy code, and they decided to remove it.

On Hacker News, ridiculous_fish, an ex-macOS software engineer, says subpixel antialiasing is painful to implement:

ex-MacOS SWE here. Subpixel antialiasing is obnoxious to implement. It requires threading physical pixel geometry up through multiple graphics layers, geometry which is screen-dependent (think multi-monitor). It multiplies your glyph caches: glyph * subpixel offset. It requires knowing your foreground and background colors at render time, which is an unnatural requirement when you want to do GPU-accelerated compositing. There’s tons of ways to fall off of the subpixel antialiased quality path, and there’s weird graphical artifacts when switching from static to animated text, or the other way. What a pain!

Nevertheless there’s no denying that subpixel-AA text looks better on 1x displays. Everyone notices when it’s not working, and macOS will look worse without it (on 1x displays).

Indeed, with macOS Mojave, a lot of users noticed their font looked awful. I noticed it too, on my 1080p monitor (“1x display”): the fonts looked blurry.

Of course, the Retina version is sharper. But the left one is still 1080p! Notice how it’s blurry…

On my retina Macbook Pro, the font looked thinner and, I don’t know, just bad, especially on Electron/Webkit based apps. What was really bothering me was how bad the fonts looked in Visual Studio Code, my favorite editor.

In fact, an issue on the VS Code GitHub repo was opened since the Mojave beta, and people were complaining, without any real solution.

Apple killed off subpixel antialiasing in 10.14 and called it a “refinement”. Not sure they know what that word means. pic.twitter.com/y345dJqI8D

On some websites, you will find command lines that modify the font smoothness. However this isn’t a real fix and barely improve the font rendering.

The real solution

While I was desperate and preparing to rollback to High Sierra, GitHub user alexanderyakusik posted the solution in the issue I mentioned above:

I just found the possible solution. Try executing this command in the terminal: defaults write -g CGFontRenderingFontSmoothingDisabled -bool NO

• Open the terminal
• Paste defaults write -g CGFontRenderingFontSmoothingDisabled -bool NO and press enter
• Reboot
• Enjoy!

Note: Some users reported that logging out was sufficient to apply the change.

I had to reenable font smoothing in the settings though. It should probably be on for you, but if it’s not, enable it here:

Now, it feels like High Sierra. I’m so happy! 🎉

What does this command do? I don’t know for sure. But I can deduce it is something that disable something linked to font smoothing, and it’s set to YES by default.

That means that Apple did not remove the code for subpixel antialiasing, but disabled it by default. I wonder if they will rollback this change in future releases, since I did not see a single person on the internet that was happy about this change…

I hope they won’t remove the option at least. Well, we’ll see!

Источник

Font Rendering / Line-Height Issue on Mac/PC (outside of element)

The info widgets content should be vertically aligned in the middle as such:

The Coded Design

Windows: Chrome 20 / FF 14 / IE 9

Mac (Lion / Mt. Lion): Chrome / FF

The Code

The Issue

Looking at the above images of the coded design you can see how the appears to throw off the alignment. Upon further viewing, the text is being rendered outside of the element on the mac.

Windows

I am embedding the fonts through a Google Web Fonts stylesheet.

Tested

I have tried the following:

• Set line-heights on every element.
• Set font-weights on every element.
• Set heights on every element.
• A combination of height/padding-top on every element.
• Used percentages/em/px for padding.

It seems that no matter what I try, the content will never center align perfectly across mac and pc.

My Question(s)

It is possible to achieve what I’m trying to do in a simplistic manner?

Should I forgo the display:table-cell; route and set specific heights/paddings on each element and child? I will still run into padding/spacing issues between the two OS’s.

What should I categorize this issue under? Line-height? Table-cells? OS? etc.

Thanks in advance!

11 Answers 11

If it is resolved by using a different font (Arial) then the issue is with the font, not with the CSS. As you have noticed font rendering differs between browsers.

One possible solution could be to download the Cutive font (I see it has a SIL license) and then run it through the Font Squirrel font-face generator. In «Expert» mode there is an option to «Fix Vertical Metrics» which might be what you are looking for.

I came across this problem with a custom font that had been created for a client’s brand. I opened the TTF font in Font Forge. The way I created uniformity with rendering was to adjust the values in Element->Font Info->OS/2->Metrics.

Win Ascent/Descent values appear to work differently to the other values. I had the following values:

Win Ascent: 1000

Typo Ascent: 750

Typo Descent: -250

HHead Ascent: 750

HHead Descent: -250

I changed the Win Ascent and Descent values to:

Win Descent: 250 (notice the positive value)

It appears you need to match the values except in my case I needed to invert the value of Win Descent to a positive one.

I have very limited knowledge about fonts but this did fix my problem. I generated the font as TTF and then ran it through a web font generator. The fonts now render identically on Mac/Windows 7/Android/iOS.

Hope this helps someone.

My solution to this (very annoying problem):

Set all elements to float:left;

Set explicit line-heights;

Enjoy a victory over cross-browser/platform css ridiculousness.

For those who can’t use Font Squirrel, I can confirm that this problem could be fixed in Font Forge for the font I was working with. Based on the answer provided by Luke, here are the steps I followed (no new information here, just providing easy-to-follow instructions):

1) Install FontForge (free) Download from: https://fontforge.github.io/

2) Open the problematic font in FontForge

3) Choose Element > Font Info

4) On the left panel, click OS/2, then click the Metrics tab

5) Change Win Ascent to the same number as HHead Ascent, and Win Descent to the POSITIVE value of HHead Descent (i.e., remove minus sign), then click OK. (If those numbers don’t address the problem, try adjusting them until you find numbers that fix the issue for your specific font.)

6) Click File > Generate Fonts. Choose the font type for your font. If the font is an .otf font, choose OpenType (CFF). Uncheck «Validate Before Saving». Set a name for your new font file. Click Generate.

Thanks to everyone who contributed answers to this question!

Источник

Question: Q: Font rendering in OS X

I am using an external LCD monitor (24″, 1920×1200, connected via DVI) on my MacBook and I am wondering why the font rendering looks so terribly bad in most OS X applications. Especially in Apple Mail it is really hard to read mails, because the fonts are blurry and slushy. Curiously the fonts are looking quite well in Finder and Safari. Even when I select the same font type in Mail — the appearance of the fonts in Mail is completely different from Safari and Finder.

When I look at the internal 13″ monitor, the font rendering is way better compared to the external monitor (even in Apple Mail). So, what can I do?

MacBook White 13″, Mac OS X (10.6.1)

Posted on Sep 28, 2009 6:52 AM

Yes, the deault value for the setting you set with the above terminal command is permanent in the sense that it will remain there until you change it.

If you want to restore the value to previous setting, then do the

defaults -currentHost read -globalDomain AppleFontSmoothing

This will either read and display the previous value, or issue a message that the setting has no value at all (which is the case for me).

If the setting didn’t have a value, and you want to restore it, then you simply delete the value

defaults -currentHost delete -globalDomain AppleFontSmoothing

or if you got the previous value, then restore it

defaults -currentHost write -globalDomain AppleFontSmoothing -int x

where x is the value that you got before you changed it.

By the way, the valid values are:

* 0 – is the setting for CRT rendering (looks horrible on LCD)
* 1 – is the setting for Light
* 2 – is the setting for Medium (Best for Flat Panel)
* 3 – is the setting for Strong

Posted on Sep 28, 2009 4:07 PM

Helpful answers

This is a known problem (to users I don’t know if Apple actually knows about it) and it has to do with anti-aliasing settings not being applied if you attach a third party (non Apple) display. But there is a fix to bring it back:

Open Terminal and enter the follwing command:

defaults -currentHost write -globalDomain AppleFontSmoothing -int 2

and then log out and back in.

Sep 28, 2009 12:36 PM

There’s more to the conversation

Loading page content

Page content loaded

Have you used the LCD font smoothing option in System Preferences/Appearance.

Also, this may be a good time to ask if you’ve checked/validated any of the problematic fonts with Apple’s Font Book (look in the Applications folder). Find and remove duplicates also.

Start there to be sure all fonts that are in play come out with a clean bill of health.

And don’t hesisate to perform wholesale deletion of old and/or little used fonts — be skeptical of anything that has come from Office 2008, including those related to an Equation Editor installation.

Sep 28, 2009 7:42 AM

Thanks for the answer.

My fonts are ok I think. It’s the font rendering that simply is not optimal for the external LCD. The fonts look ok on the internal display. It doesn’t matter which font I select in Mail (in font settings) — every font is «over-smoothed» and looks «edged» and slushy.

What I do not understand is the fact that especially the Finder seems to do a completely different font rendering. If you have the possibility, please compare the characters in Finder with the same characters in Mail. I am quite sure that you will realize the same big difference.

Sep 28, 2009 8:17 AM

Font antialiasing and subpixel rendering depends a lot on the calibration of the screen. Unknown intensity responses make the whole idea of antialiasing nonsensical. So go ahead and calibrate your external screen and follow the instructions precisely.

Sep 28, 2009 8:24 AM

I now made two screenshots of Mail: The first one while the external display was disconnected, the second one when it was connected (and Mail moved to the external display). I opened both screenshots in Photoshop and there was a clear difference between the font renderings: On the screenshot of the internal display, the fonts are smoothed with black and grey pixels only, while on the screenshot from the external display they are smoothed with colored pixels. This is the reason why the text looks so bad on the external one. Therefore, it is definitely a problem of the font rendering. In Photoshop, the difference of font rendering is clearly visible!

The first line is internal display, the second line external display. That’s unbelievable.

Another thing: I found out that it’s not only Mail that has the problem — it is any application that was started after the external display had been connected. It seems that OS X applies the font rendering setting at the moment a application is starts. When I disconnect the display, start Finder, Mail, Safari and so on, and then connect the display, then all the applications look great even on the external display. When I quit the apps and then restart, the font rendering is broken again

Sep 28, 2009 9:01 AM

you actually DO want the colored pixels. That’s subpixel rendering and enhances the contrast and clearness of the font rendering. What is confusing however is that your main display doesn’t use it. Reasons for subpixel rendering failing are: running your display at non-native resolutions, wrong subpixel order selection, wrong monitor profile.

So, the question is, what did you change and what is non-standard about your setup?

Sep 28, 2009 10:48 AM

Be sure to double check. Fonts are behaving in a new manner w/SL, and it is critical to perform housekeeping if you have issues such as you describe. Don’t let past assumptions distract you from getting things right with your new OS. Get rid of duplicates as well as any that throw errors. don’t be shy about getting rid of ones that simply display warnings too.

If you delay confirming your font health, you’ll risk chasing the proverbial ghost in the machine 🙂

Sep 28, 2009 10:57 AM

Thanks for your further answers.

I double checked with my other (new) MacBook (15″ Unibody). The font rendering on the external 24″ monitor is exactly the same, it looks very blurry and text can hardly be read. And be sure: I use the native resolution and even tried to calibrate the display with Apple’s calibrating tool in system settings. The used profile is the right one, it is named like the monitor model. The same for the internal display: It uses Apple’s own LCD profile.
I also started Windows 7 in VMWare and the result was a pretty good picture with perfect font rendering on the external monitor. Therefore I am sure that there is a problem with the font rendering setting in OS X.

The interesting thing is that the picture of the internal display of the 15″ MBP looks great, although it is using the colored subpixels as well. I don’t think that the colors make any disadvantage ingeneral, but it seems that the kind of font rendering is simply wrong for the external 24″ monitor on both MacBooks. I think that OS X for sure does adapt the font rendering dependent on the monitor profile. What I would need is the possibility to change the kind of font rendering manually.

Tomorrow I will try to use another profile that OS X offers. Maybe this safes the problem.

Источник