Use any font with javascript.
We all know the wonderful libraries sIFR3 and FLIR, which on the fly help to use any font on web pages.
However, from my point of view, their use (namely, installation and configuration) cannot be considered easy work.
Today I will talk about the library Typeface.js, which, as the name implies, works on pure JavaScript.
The official site of the library Typeface.js - http://typeface.neocracy.org/ . On this resource you can find all the additional information.
The library is based on the vector drawing capabilities built into the browser. For quite a long time, browsers support vector graphics rendering, Firefox has support for canvas and SVG objects, and IE supports VML . Browser support announced by developer David Chester: Firefox 1.5+, Safari 2+, Internet Explorer 6+.
The library consists of two components: a perl module for converting truetype fonts into vector coordinates and a javascript file that renders text in a browser using a vector font description.
')
Everything, you can load the page in the browser and watch the result!
And here is an example of such a page entirely:
blockquote>
For example, I use the ALS Agrus paid font to see the result in more complex fonts. What happened with me can be seen in the picture in the top.
However, from my point of view, their use (namely, installation and configuration) cannot be considered easy work.
Today I will talk about the library Typeface.js, which, as the name implies, works on pure JavaScript.
A bit of theory
The official site of the library Typeface.js - http://typeface.neocracy.org/ . On this resource you can find all the additional information.
How it works
The library is based on the vector drawing capabilities built into the browser. For quite a long time, browsers support vector graphics rendering, Firefox has support for canvas and SVG objects, and IE supports VML . Browser support announced by developer David Chester: Firefox 1.5+, Safari 2+, Internet Explorer 6+.
The library consists of two components: a perl module for converting truetype fonts into vector coordinates and a javascript file that renders text in a browser using a vector font description.
')
Benefits
- The most important thing is the lack of flash. Everything works on the built-in features of browsers (and not even the latest versions).
- Quick and easy installation. No need to understand the intricacies of the more "tricked" sIFR and FLIR.
- The text is visible as “text”, it can be selected, copied, etc. Search engines treat everything exactly as text. True, you can only select text in browsers that support canvas.
- Support for all text properties in CSS2. (font-size, letter-spacing, font-stretch, font-weight, line-height, etc.)
Example
Training
- Downloading the library and uploading to your server daddy / js /
- Next, you need to convert the desired truetype font with the help of “Convert a Font” or download the perl module itself .
- Place the resulting .js file in the envelope in the daddy with the library.
Process
- In the <head> of the document we place
where moj-font is the document we received as a result of the conversion.<script type= "text/javascript" src= "js/typeface-0.11.js" ></script>
<script type= "text/javascript" src= "js/moj-font.typeface.js" ></script> - IMPORTANT! All css-files must be loaded before loading the library. This is extremely important, otherwise there will be no result.
- In the <body> of the document to any layer in which we need to assign the selected font to the text, set the class typeface-js.
<div class = "myclass typeface-js" style= "font-family: ALSAgrus; font-size:40px;" >
.
</div> - Style can be set both in the style attribute and in css. Font-family should be the name of the font loaded with the library. For reference, the correct name can be found at the bottom of the converted js file with the vector font display.
Everything, you can load the page in the browser and watch the result!
And here is an example of such a page entirely:
blockquote>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html > < head > < title > </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < script type ="text/javascript" src ="js/typeface-0.11.js" ></ script > <script type= "text/javascript" src= "js/als_agrus__regular.typeface.js" > </ script > </ head > < body > < div class ="myclass typeface-js" style ="font-family: ALSAgrus; font-size:40px;" > . </ div > < div > , < br /> Typeface.js ALS Agrus </ div > </ body > </ html ><! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html > < head > < title > </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < script type ="text/javascript" src ="js/typeface-0.11.js" ></ script > <script type= "text/javascript" src= "js/als_agrus__regular.typeface.js" > </ script > </ head > < body > < div class ="myclass typeface-js" style ="font-family: ALSAgrus; font-size:40px;" > . </ div > < div > , < br /> Typeface.js ALS Agrus </ div > </ body > </ html ><! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html > < head > < title > </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < script type ="text/javascript" src ="js/typeface-0.11.js" ></ script > <script type= "text/javascript" src= "js/als_agrus__regular.typeface.js" > </ script > </ head > < body > < div class ="myclass typeface-js" style ="font-family: ALSAgrus; font-size:40px;" > . </ div > < div > , < br /> Typeface.js ALS Agrus </ div > </ body > </ html ><! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html > < head > < title > </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < script type ="text/javascript" src ="js/typeface-0.11.js" ></ script > <script type= "text/javascript" src= "js/als_agrus__regular.typeface.js" > </ script > </ head > < body > < div class ="myclass typeface-js" style ="font-family: ALSAgrus; font-size:40px;" > . </ div > < div > , < br /> Typeface.js ALS Agrus </ div > </ body > </ html ><! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html > < head > < title > </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < script type ="text/javascript" src ="js/typeface-0.11.js" ></ script > <script type= "text/javascript" src= "js/als_agrus__regular.typeface.js" > </ script > </ head > < body > < div class ="myclass typeface-js" style ="font-family: ALSAgrus; font-size:40px;" > . </ div > < div > , < br /> Typeface.js ALS Agrus </ div > </ body > </ html ><! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html > < head > < title > </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < script type ="text/javascript" src ="js/typeface-0.11.js" ></ script > <script type= "text/javascript" src= "js/als_agrus__regular.typeface.js" > </ script > </ head > < body > < div class ="myclass typeface-js" style ="font-family: ALSAgrus; font-size:40px;" > . </ div > < div > , < br /> Typeface.js ALS Agrus </ div > </ body > </ html ><! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html > < head > < title > </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < script type ="text/javascript" src ="js/typeface-0.11.js" ></ script > <script type= "text/javascript" src= "js/als_agrus__regular.typeface.js" > </ script > </ head > < body > < div class ="myclass typeface-js" style ="font-family: ALSAgrus; font-size:40px;" > . </ div > < div > , < br /> Typeface.js ALS Agrus </ div > </ body > </ html ><! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html > < head > < title > </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < script type ="text/javascript" src ="js/typeface-0.11.js" ></ script > <script type= "text/javascript" src= "js/als_agrus__regular.typeface.js" > </ script > </ head > < body > < div class ="myclass typeface-js" style ="font-family: ALSAgrus; font-size:40px;" > . </ div > < div > , < br /> Typeface.js ALS Agrus </ div > </ body > </ html ><! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html > < head > < title > </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < script type ="text/javascript" src ="js/typeface-0.11.js" ></ script > <script type= "text/javascript" src= "js/als_agrus__regular.typeface.js" > </ script > </ head > < body > < div class ="myclass typeface-js" style ="font-family: ALSAgrus; font-size:40px;" > . </ div > < div > , < br /> Typeface.js ALS Agrus </ div > </ body > </ html ><! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html > < head > < title > </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < script type ="text/javascript" src ="js/typeface-0.11.js" ></ script > <script type= "text/javascript" src= "js/als_agrus__regular.typeface.js" > </ script > </ head > < body > < div class ="myclass typeface-js" style ="font-family: ALSAgrus; font-size:40px;" > . </ div > < div > , < br /> Typeface.js ALS Agrus </ div > </ body > </ html ><! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html > < head > < title > </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < script type ="text/javascript" src ="js/typeface-0.11.js" ></ script > <script type= "text/javascript" src= "js/als_agrus__regular.typeface.js" > </ script > </ head > < body > < div class ="myclass typeface-js" style ="font-family: ALSAgrus; font-size:40px;" > . </ div > < div > , < br /> Typeface.js ALS Agrus </ div > </ body > </ html ><! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html > < head > < title > </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < script type ="text/javascript" src ="js/typeface-0.11.js" ></ script > <script type= "text/javascript" src= "js/als_agrus__regular.typeface.js" > </ script > </ head > < body > < div class ="myclass typeface-js" style ="font-family: ALSAgrus; font-size:40px;" > . </ div > < div > , < br /> Typeface.js ALS Agrus </ div > </ body > </ html ><! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html > < head > < title > </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < script type ="text/javascript" src ="js/typeface-0.11.js" ></ script > <script type= "text/javascript" src= "js/als_agrus__regular.typeface.js" > </ script > </ head > < body > < div class ="myclass typeface-js" style ="font-family: ALSAgrus; font-size:40px;" > . </ div > < div > , < br /> Typeface.js ALS Agrus </ div > </ body > </ html ><! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html > < head > < title > </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < script type ="text/javascript" src ="js/typeface-0.11.js" ></ script > <script type= "text/javascript" src= "js/als_agrus__regular.typeface.js" > </ script > </ head > < body > < div class ="myclass typeface-js" style ="font-family: ALSAgrus; font-size:40px;" > . </ div > < div > , < br /> Typeface.js ALS Agrus </ div > </ body > </ html ><! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html > < head > < title > </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < script type ="text/javascript" src ="js/typeface-0.11.js" ></ script > <script type= "text/javascript" src= "js/als_agrus__regular.typeface.js" > </ script > </ head > < body > < div class ="myclass typeface-js" style ="font-family: ALSAgrus; font-size:40px;" > . </ div > < div > , < br /> Typeface.js ALS Agrus </ div > </ body > </ html ><! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html > < head > < title > </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < script type ="text/javascript" src ="js/typeface-0.11.js" ></ script > <script type= "text/javascript" src= "js/als_agrus__regular.typeface.js" > </ script > </ head > < body > < div class ="myclass typeface-js" style ="font-family: ALSAgrus; font-size:40px;" > . </ div > < div > , < br /> Typeface.js ALS Agrus </ div > </ body > </ html ><! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html > < head > < title > </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < script type ="text/javascript" src ="js/typeface-0.11.js" ></ script > <script type= "text/javascript" src= "js/als_agrus__regular.typeface.js" > </ script > </ head > < body > < div class ="myclass typeface-js" style ="font-family: ALSAgrus; font-size:40px;" > . </ div > < div > , < br /> Typeface.js ALS Agrus </ div > </ body > </ html >
For example, I use the ALS Agrus paid font to see the result in more complex fonts. What happened with me can be seen in the picture in the top.
Source: https://habr.com/ru/post/54109/
All Articles