Typeface.js is not a text, but a picture (JavaScript + SVG / VML).

Quite often it happens that for the design of a particular page requires the use of non-standard font. If the text is not generated dynamically, we can simply prepare a picture with the inscription. Otherwise, PHP will come to the rescue with a function. imagettftext imagettftext . To perform this manipulation on the client side, the script described in this note is useful.

So, we are talking about typeface.js .
In order to work wonders will require:

get the script itself ( typeface-0.10.js );
prepare the font with a special tool ;
connect the script and the resulting font file with the .js extension to the page;
add a typeface-js class to the page element that needs to be displayed in a bizarre font;
assign this class: font-family: Some Font; (the name of your font. Here you should be attentive and take the name from the font viewer or, say, from Photoshop).

For example:

 <html>
   <head>
 <! - First, load the external style file ->
     <link rel = "stylesheet" type = "text / css" ref = "/ style.css">

 <! - Then typeface.js library and font file ->

     <script type = "text / javascript" src = "typeface-0.10.js"> </ script>
     <script type = "text / javascript" src = "some_font_regular.typeface.js"> </ script>
   </ head>

   <body>
    
 <! - Further - strictly to the north about 50 meters ->

     <div class = "typeface-js" style = "font-family: Some Font">
       I am the text!  And I am written in Some Font.
     </ div>
   </ body>
 </ html>

That's all. It is also worth noting that the font converter can be downloaded as a separate PERL module for local use.

From the advantages of this method of displaying fonts, I note a great understanding of the CSS script. This means that for the typeface-js class you can write:

 .typeface-js {
 font: bold 36px Some Font;
 color: red;
 }

At the output we will get the inscription in bold type Some Font of the 36th size and red. More information about the properties of CSS supported by the script can be found on the developer's site .

The disadvantages are resource consumption. For menu items, say, or headings, it is quite suitable, while for large volumes of text it will be heavy (is it necessary? ). Also, support for Cyrillic fonts is carried out only when using UTF-8 encoding (which is quite logical).
')
In the future, it is expected: an increase in the speed of work in IE, full support for @font-face , the addition of currently disabled CSS properties (in particular, x-height and the subclass :hover ), etc.

I hope was helpful and thank you for your attention.
All thanks and questions regarding the work of the mechanism described above, please address it to its creator - David Chester .

UPD. Comparing sIFR and typeface.js Olegas described in his article titled “ Typography. SIFR versus typeface.js »

Source: https://habr.com/ru/post/43370/

All Articles

Typeface.js is not a text, but a picture (JavaScript + SVG / VML).

For example:

More articles: