Webfonts - we deal with antialiasing under Windows (UPD)
I think that not only me, but other Chrome users under Windows, on many sites, noticed problems with the display of non-standard fonts. You can read the text on such sites, but it hurts your eyes. I would have continued to endure all this, but on one of my own recent projects this question arose literally. I decided to understand everything thoroughly.
The difference in these two fragments is obvious. The first is made from a randomly selected site adaptive-images , and the second from its local copy, in whose css literally one line has been changed.
(Those who read the first version of the article can immediately go to the UPD , which shows a working alternative solution for Chrome)
')
A small general note - the studies cited in the article were conducted under Windows 7. It will be interesting to find out in the comments on the state of affairs on other platforms.
So, the difference between these two fragments is that in the second one, the browser uses a so-called antialiasing when displaying the font. How to force the browser to use this anti-aliasing? As it turned out later, everything depends very much on both the browser itself and the settings of the operating system. Looking ahead, I will say that smoothing is of two types and the results of their work differ from each other. The first type I have already mentioned, and the second is the so-called sub - pixel rendering . But let's get everything in order.
The search for a solution, as usual, began with the publication of this issue on one of the core resources. The answers were encouraging, but none of them helped to the full, although they spread my horizons of knowledge in this area. The search for a working solution took three hours, during which the wall and, accordingly, its own forehead was damaged, although there was no shortage in articles with ready-made solutions. As usual, the horned one was hiding somewhere in punctuation marks.
Fortunately, I am not the first to encounter this problem and a keyword search quickly brought to its solution using SVG fonts that, unlike their TrueType counterpart, are rendered in Chrome using the first type of anti-aliasing. It would seem - here it is happiness - but it was not there!
Surely, there are other ways to get the necessary font-files, but for some reason I chose the FontSquirrel service. I do not want to make hasty conclusions, but in my opinion, an error crept into their css generator.
As a guinea pig, we’ll take the ready-made Colaborate font from their website. The archive contains a set of fonts in various formats, the css and demo.html file. We open the latter in Chrome and start to wonder, and where is the anti-aliasing? His absence is especially noticeable in the Bold tracing.
Open the css and see what is generated for us on the FontSqurell server:
at first glance, no crime is noticeable. I will not describe the process of finding a solution, which is interrupted thereby with a bang of the head against the wall, I will give at once a fragment that yields the desired result:
As it was written above, the difference is only in one line. The definition of the svg font is placed immediately below the definition of eot and the substring #ColaborateThinRegular is removed from it. Judge for a difference yourself - on the right there is a fragment with the original css (there is no smoothing), on the left after making corrections:
The explanation for this is quite simple - by moving the description of the svg font, we increased its priority in WebKit browsers (Chrome, Safari) and it was used instead of TTF, which for some reason does not smooth these browsers under Windows.
I can not judge the reasons why the generator of this service makes just such a css, and not some other. It may have worked well before, but something could have changed in WebKit since then. I think it's worth writing them a bug report, if the comments do not provide some more logical explanation.
But that's not all that I learned about web fonts. Next we will talk about fine tuning in FontSquirrel for sets with Cyrillic characters, anti-aliasing in other browsers and optimizing the speed of web font loading. I'll start with the last item.
As you know, any beauty requires sacrifice. In the case of custom fonts, donate time to load the page by increasing the size of the loaded data. You can combat this by compressing our font files. For svg, the procedure is the following - using gzip, compress our file, rename it - assign it with the svgz extension and add a new MIME-type to the server configuration. I give an example for Apache (can be specified in .htaccess):
And change the corresponding line in css (add z) - url ('ColabThi-webfont.svg z ') format ('svg')
Please note that font / opentype is not a standard MIME-type, but it’s this type that helps to get rid of the annoying error in the Chrome console: Resource interpreted as Mont type image / svg + xml
Now about how to configure FontSquirrel to include characters in the font that extend beyond the ASCII-7 table. The settings shown in the screenshot below are available in Expert mode. Let me give you an option that worked well in my case, do not forget to include other types of fonts, I only needed SVG.
I would be grateful for clarifications to these settings, if you can somehow improve them, from experts in their field in the comments.
In conclusion, briefly touch on the features of IE, FireFox and Opera. Let me remind you that we are talking about Windows7.
It is worth saying that the antialiasing algorithm used by Chrome for SVG fonts is not the same as subpixel anti-aliasing used by various operating systems for displaying screen fonts. On Windows, this technology is called ClearType . Look at the difference - the red font is Chrome + SVG Antialiasing, black is FireFox + TTF ClearType. In this fragment, it is clearly seen that anti-aliasing adds “extra” pixels, making the letters slightly wider. For some layouts about pixel perfect pixel perfect layout you can forget.
By a simple experimental way, it was possible to establish that anti-aliasing in FF and large O directly depend on the ClearType settings in the operating system. If you turn off this feature, it is impossible to force browsers to smooth fonts, although IE ignores the instructions of the operating system and always smoothes fonts. As they say, some time ago, the css directive (-webkit-) font-smooth (ing) appeared, but in recent versions of FireFox, its support was somehow removed . If you know how to get around these restrictions, please write about it in the comments. It is also unclear the answer to the question of how to turn off font smoothing, because there are situations where it is not necessary.
In the process of writing this article, a number of feature articles were read and many sites were viewed through the prism of using non-standard fonts, in order to determine for themselves the scope of applicability of this useful technology. I want to say that the conclusion I made is the following: using non-standard fonts is possible and necessary (otherwise, bootstrap plays a different role ), but in limited quantities, for decorating some UI elements. And the main text content should be left alone! Otherwise, the site may not look the way it was originally intended. In support of these words I give a link to a thoughtful article , which says about the same thing, but in more detail. Perhaps the situation will change in the future, but for this to happen, a single font rendering subsystem should appear in browsers, displaying the text in the same way, at least within one platform.
UPD Eureka! After the reminder from GreatRash I decided to find out the reason why I didn’t work —webkit-font-smoothing and found a bug report in the process. There are more than a hundred comments, but in the midst of sluggish boozing a real diamond has met! This design allows you to abandon the SVG fonts and, at first glance, Chrome began to render the text in the same way as all other browsers, although the distance between the letters remains different, but this, apparently, can also be cured with this recipe
The difference in these two fragments is obvious. The first is made from a randomly selected site adaptive-images , and the second from its local copy, in whose css literally one line has been changed.
(Those who read the first version of the article can immediately go to the UPD , which shows a working alternative solution for Chrome)
')
The essence of the problem
A small general note - the studies cited in the article were conducted under Windows 7. It will be interesting to find out in the comments on the state of affairs on other platforms.
So, the difference between these two fragments is that in the second one, the browser uses a so-called antialiasing when displaying the font. How to force the browser to use this anti-aliasing? As it turned out later, everything depends very much on both the browser itself and the settings of the operating system. Looking ahead, I will say that smoothing is of two types and the results of their work differ from each other. The first type I have already mentioned, and the second is the so-called sub - pixel rendering . But let's get everything in order.
The search for a solution, as usual, began with the publication of this issue on one of the core resources. The answers were encouraging, but none of them helped to the full, although they spread my horizons of knowledge in this area. The search for a working solution took three hours, during which the wall and, accordingly, its own forehead was damaged, although there was no shortage in articles with ready-made solutions. As usual, the horned one was hiding somewhere in punctuation marks.
Chrome
Fortunately, I am not the first to encounter this problem and a keyword search quickly brought to its solution using SVG fonts that, unlike their TrueType counterpart, are rendered in Chrome using the first type of anti-aliasing. It would seem - here it is happiness - but it was not there!
Surely, there are other ways to get the necessary font-files, but for some reason I chose the FontSquirrel service. I do not want to make hasty conclusions, but in my opinion, an error crept into their css generator.
As a guinea pig, we’ll take the ready-made Colaborate font from their website. The archive contains a set of fonts in various formats, the css and demo.html file. We open the latter in Chrome and start to wonder, and where is the anti-aliasing? His absence is especially noticeable in the Bold tracing.
Open the css and see what is generated for us on the FontSqurell server:
@font-face { font-family: 'ColaborateThinRegular'; src: url('ColabThi-webfont.eot'); src: url('ColabThi-webfont.eot?#iefix') format('embedded-opentype'), url('ColabThi-webfont.woff') format('woff'), url('ColabThi-webfont.ttf') format('truetype'), url('ColabThi-webfont.svg#ColaborateThinRegular') format('svg'); font-weight: normal; font-style: normal; } at first glance, no crime is noticeable. I will not describe the process of finding a solution, which is interrupted thereby with a bang of the head against the wall, I will give at once a fragment that yields the desired result:
@font-face { font-family: 'ColaborateThinRegular'; src: url('ColabThi-webfont.eot'); src: url('ColabThi-webfont.eot?#iefix') format('embedded-opentype'), url('ColabThi-webfont.svg') format('svg'), url('ColabThi-webfont.woff') format('woff'), url('ColabThi-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } As it was written above, the difference is only in one line. The definition of the svg font is placed immediately below the definition of eot and the substring #ColaborateThinRegular is removed from it. Judge for a difference yourself - on the right there is a fragment with the original css (there is no smoothing), on the left after making corrections:
Two fragments
The explanation for this is quite simple - by moving the description of the svg font, we increased its priority in WebKit browsers (Chrome, Safari) and it was used instead of TTF, which for some reason does not smooth these browsers under Windows.
I can not judge the reasons why the generator of this service makes just such a css, and not some other. It may have worked well before, but something could have changed in WebKit since then. I think it's worth writing them a bug report, if the comments do not provide some more logical explanation.
But that's not all that I learned about web fonts. Next we will talk about fine tuning in FontSquirrel for sets with Cyrillic characters, anti-aliasing in other browsers and optimizing the speed of web font loading. I'll start with the last item.
Load optimization
As you know, any beauty requires sacrifice. In the case of custom fonts, donate time to load the page by increasing the size of the loaded data. You can combat this by compressing our font files. For svg, the procedure is the following - using gzip, compress our file, rename it - assign it with the svgz extension and add a new MIME-type to the server configuration. I give an example for Apache (can be specified in .htaccess):
AddType font/opentype .svg .svgz AddEncoding gzip .svgz And change the corresponding line in css (add z) - url ('ColabThi-webfont.svg z ') format ('svg')
Please note that font / opentype is not a standard MIME-type, but it’s this type that helps to get rid of the annoying error in the Chrome console: Resource interpreted as Mont type image / svg + xml
FontSquirrel settings
Now about how to configure FontSquirrel to include characters in the font that extend beyond the ASCII-7 table. The settings shown in the screenshot below are available in Expert mode. Let me give you an option that worked well in my case, do not forget to include other types of fonts, I only needed SVG.
Screenshot with settings
I would be grateful for clarifications to these settings, if you can somehow improve them, from experts in their field in the comments.
Other browsers
In conclusion, briefly touch on the features of IE, FireFox and Opera. Let me remind you that we are talking about Windows7.
It is worth saying that the antialiasing algorithm used by Chrome for SVG fonts is not the same as subpixel anti-aliasing used by various operating systems for displaying screen fonts. On Windows, this technology is called ClearType . Look at the difference - the red font is Chrome + SVG Antialiasing, black is FireFox + TTF ClearType. In this fragment, it is clearly seen that anti-aliasing adds “extra” pixels, making the letters slightly wider. For some layouts about pixel perfect pixel perfect layout you can forget.
Antialiasing vs Subpixel rendering
By a simple experimental way, it was possible to establish that anti-aliasing in FF and large O directly depend on the ClearType settings in the operating system. If you turn off this feature, it is impossible to force browsers to smooth fonts, although IE ignores the instructions of the operating system and always smoothes fonts. As they say, some time ago, the css directive (-webkit-) font-smooth (ing) appeared, but in recent versions of FireFox, its support was somehow removed . If you know how to get around these restrictions, please write about it in the comments. It is also unclear the answer to the question of how to turn off font smoothing, because there are situations where it is not necessary.
Conclusion
In the process of writing this article, a number of feature articles were read and many sites were viewed through the prism of using non-standard fonts, in order to determine for themselves the scope of applicability of this useful technology. I want to say that the conclusion I made is the following: using non-standard fonts is possible and necessary (
UPD Eureka! After the reminder from GreatRash I decided to find out the reason why I didn’t work —webkit-font-smoothing and found a bug report in the process. There are more than a hundred comments, but in the midst of sluggish boozing a real diamond has met! This design allows you to abandon the SVG fonts and, at first glance, Chrome began to render the text in the same way as all other browsers, although the distance between the letters remains different, but this, apparently, can also be cured with this recipe
body { -webkit-font-smoothing: subpixel-antialiased !important; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; } Source: https://habr.com/ru/post/166291/
All Articles