Cufón - use the fonts that your heart desires
If the task is to use a non-standard font in the project, then there is an opportunity to go several ways:
For the curious: there is another way, almost complete analogue of the koufon - typefaces.js , but today we will not talk about it.
As the developers write on the site, the vocation of their project to become a worthy alternative for sIFR, which, despite all its merits, is still somewhat difficult to configure and use. To achieve this, the following goals were set:
Cufón consists of two independent parts - a font generator that converts a standard font (in formats, TTF, OTF) into some intermediate format that will be used later. The second part is the JavaScript rendering engine.
')
Everything was done very cleverly and thoughtfully, but in the end, for all of this machine to work, you are required to connect only 2 JavaScript files and you can enjoy it.
Let's try all this in practice. First, take the font file, I have for example the Rokwell font, in plain and bold. Go to cufon.shoqolate.com/generate and shove the files we have into the form. Further, at will, we mark some additional settings and get the file, in my case it was Rockwell_400-Rockwell_700.font.js The name shows us that the file contains our font in two styles, clearly, but somehow for a long time to write this in the script tag ...
The next step is to download the Cufón distro itself, which in compressed form takes some 14KB. cufon.shoqolate.com/js/cufon-yui.js
We include both of these files in our document, like the most common JavaScript.
Now we choose which elements of the page we want to draw with our beautiful font. For example, all the headers are H1, no problem:
And that's all that is required of us. Color, size and other parameters for drawing are taken from CSS rules. If they are of course given.
If we want to replace not only H1, but also some kind of “ul.menu> li.active> a”, then we will need a third-party library that can sample by selectors. The fact is that very few people do without such JavaScript libraries as Prototype, jQuery, MooTools or Dojo, and therefore the creators decided not to make their library redundant and offer us to use third-party. Correctly offered! So, when using one of the above libraries, we just need to connect them in the document earlier than Cufón, then he himself will figure out what's what and you can start using more complex queries.
A special note for people who care about IE users. The developers recommend inserting the following code immediately before </ body>, or before calling any external script, for example Google Analytics:
This should save IE from some delay in drawing fonts.
If you do not specify additional settings when calling, the last downloaded font ( Myriad_Pro_400 ) will be used.
And all the pages where Cufón is used must be in UTF-8 encoding or backward compatible with it, for example, US-ASCII . And if your pages are still in CP1251 - your problems.
UPD: pgg user demonstrates that CP1251 is supported!
If, when calling a render, we want to specify some additional visual settings for the text, this should be done like this:
This may be necessary for example in the following case:
When calling the first renderer, Cufón will correctly determine the color for all the links in the menu, according to the CSS rules, but it will not go further and find out if we have any further differences, because one of the links can be shown in white on a white background . To correct such a situation, call the second renderer.
In this way, it is possible to prescribe not only the color, but also practically all the CSS properties related to the text. In addition, there is an opportunity to fill the text with a gradient, but it is not clear why it is necessary, and who really want to, refer to the manual page, where it is well described. wiki.github.com/sorccu/cufon/styling
It is also worth paying attention to the moment that font replacement occurs only at the moment the renderer is called:
It will make a replacement for all h1 elements with the alala class, if you further assign the alala class using a script, for another h1, then there will be no text replacement! So do not forget to make a call to the renderer after the manipulations.
It was:
It became:
Project page on github
Documentation on visual formatting with CSS
Font File Generator
Original article on the blog Yed-Prior
- B-method - do not use non-standard fonts, it’s enough to say in CSS body {font-family: sans-serif;} and not fool yourself.
- Cattle-method - cut from ZHEPEGov, pictures with titles, shake harder, that there would be a blurriness and paste in instead of the text of the picture. Quite popular in our open spaces method.
- W3C method - use
@font-familyand enjoy beautiful fonts without any problems. While this method is not considered as working, due to the weak support from the browser. - sIFR is the coolest thing most used today, but as a drawback, it requires a Flash plug-in. Although it is difficult to call it a disadvantage, but if there is a tool that allows you to do without plug-ins, then this is good news.
- Cufón - the most it. A relatively new method that shows excellent results. He is the hero of this article.
For the curious: there is another way, almost complete analogue of the koufon - typefaces.js , but today we will not talk about it.
What kind of koufon?
As the developers write on the site, the vocation of their project to become a worthy alternative for sIFR, which, despite all its merits, is still somewhat difficult to configure and use. To achieve this, the following goals were set:
- Do not require plug-ins, shmaginov - only the tools natively supported by the browser are used (of these tools, JavaScript, SVG and <canvas> are used for normal, VML for IE)
- Compatibility - should work in all common browsers.
- Ease of use - a minimum of preparations and configuration.
- Speed - it should be big enough, even for voluminous texts.
How does it work
Cufón consists of two independent parts - a font generator that converts a standard font (in formats, TTF, OTF) into some intermediate format that will be used later. The second part is the JavaScript rendering engine.
')
Everything was done very cleverly and thoughtfully, but in the end, for all of this machine to work, you are required to connect only 2 JavaScript files and you can enjoy it.
Let's try
Let's try all this in practice. First, take the font file, I have for example the Rokwell font, in plain and bold. Go to cufon.shoqolate.com/generate and shove the files we have into the form. Further, at will, we mark some additional settings and get the file, in my case it was Rockwell_400-Rockwell_700.font.js The name shows us that the file contains our font in two styles, clearly, but somehow for a long time to write this in the script tag ...
The next step is to download the Cufón distro itself, which in compressed form takes some 14KB. cufon.shoqolate.com/js/cufon-yui.js
We include both of these files in our document, like the most common JavaScript.
<script type = "text / javascript" src = "./ js / cufon-yui.js"> </ script> <script type = "text / javascript" src = "./ js / Rockwell_400-Rockwell_700.font.js"> </ script>
Now we choose which elements of the page we want to draw with our beautiful font. For example, all the headers are H1, no problem:
<script type = "text / javascript">
Cufon.replace ("h1");
</ script> And that's all that is required of us. Color, size and other parameters for drawing are taken from CSS rules. If they are of course given.
If we want to replace not only H1, but also some kind of “ul.menu> li.active> a”, then we will need a third-party library that can sample by selectors. The fact is that very few people do without such JavaScript libraries as Prototype, jQuery, MooTools or Dojo, and therefore the creators decided not to make their library redundant and offer us to use third-party. Correctly offered! So, when using one of the above libraries, we just need to connect them in the document earlier than Cufón, then he himself will figure out what's what and you can start using more complex queries.
A special note for people who care about IE users. The developers recommend inserting the following code immediately before </ body>, or before calling any external script, for example Google Analytics:
<script type="text/javascript"> Cufon.now(); </script>
<script type="text/javascript"> Cufon.now(); </script>
This should save IE from some delay in drawing fonts.
Use multiple fonts.
<script src="cufon-yui.js" type="text/javascript"></script> <script src="Frutiger_LT_Std_400.font.js" type="text/javascript"></script> <script src="Myriad_Pro_400.font.js" type="text/javascript"></script> <script type="text/javascript"> Cufon.replace('h1', { fontFamily: 'Frutiger LT Std' }); Cufon.replace('h2', { fontFamily: 'Myriad Pro' }); </script>
<script src="cufon-yui.js" type="text/javascript"></script> <script src="Frutiger_LT_Std_400.font.js" type="text/javascript"></script> <script src="Myriad_Pro_400.font.js" type="text/javascript"></script> <script type="text/javascript"> Cufon.replace('h1', { fontFamily: 'Frutiger LT Std' }); Cufon.replace('h2', { fontFamily: 'Myriad Pro' }); </script>
If you do not specify additional settings when calling, the last downloaded font ( Myriad_Pro_400 ) will be used.
And all the pages where Cufón is used must be in UTF-8 encoding or backward compatible with it, for example, US-ASCII . And if your pages are still in CP1251 - your problems.
UPD: pgg user demonstrates that CP1251 is supported!
Subtleties
If, when calling a render, we want to specify some additional visual settings for the text, this should be done like this:
Cufon.replace("ul.menu li.active a", {color:'#000000'});
Cufon.replace("ul.menu li.active a", {color:'#000000'});
This may be necessary for example in the following case:
Cufon.replace("ul.menu li a");
Cufon.replace("ul.menu li.active a", {color:'#000000'});
When calling the first renderer, Cufón will correctly determine the color for all the links in the menu, according to the CSS rules, but it will not go further and find out if we have any further differences, because one of the links can be shown in white on a white background . To correct such a situation, call the second renderer.
In this way, it is possible to prescribe not only the color, but also practically all the CSS properties related to the text. In addition, there is an opportunity to fill the text with a gradient, but it is not clear why it is necessary, and who really want to, refer to the manual page, where it is well described. wiki.github.com/sorccu/cufon/styling
It is also worth paying attention to the moment that font replacement occurs only at the moment the renderer is called:
Cufon.replace("h1.alala");
Cufon.replace("h1.alala");
It will make a replacement for all h1 elements with the alala class, if you further assign the alala class using a script, for another h1, then there will be no text replacement! So do not forget to make a call to the renderer after the manipulations.
Example
It was:
It became:
Links
Project page on github
Documentation on visual formatting with CSS
Font File Generator
Original article on the blog Yed-Prior
Source: https://habr.com/ru/post/61033/
All Articles