I
I
Ilya Levin2014-11-16 19:23:37
Canvas
Ilya Levin, 2014-11-16 19:23:37

What tool is used to create websites through canvas?

Tell me, please, with the help of what tool (program, editor) are sites created, where the structure, for example, of the text is as follows:

<cufon class="cufon cufon-canvas" alt="Школа " style="width: 95px; height: 33px;">
  <canvas width="114" height="37" style="width: 114px; height: 37px; top: -5px; left: 0px;"></canvas>
  <cufontext>Школа </cufontext>
</cufon>
<cufon class="cufon cufon-canvas" alt="Боевых " style="width: 106px; height: 33px;">
  <canvas width="125" height="37" style="width: 125px; height: 37px; top: -5px; left: 0px;"></canvas>
  <cufontext>Боевых </cufontext>
</cufon>
<cufon class="cufon cufon-canvas" alt="Искусств " style="width: 125px; height: 33px;">
  <canvas width="145" height="37" style="width: 145px; height: 37px; top: -5px; left: 0px;"></canvas>
  <cufontext>Искусств </cufontext>
</cufon>

That is, canvas is used almost everywhere. Does anyone know such an editor?

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Alexander Sydorenko, 2014-11-16
@ilyachase

This is not an editor. The output of what you have attached is done by a simple Cufon - a library for rendering js fonts on canvas that you could not connect via web fonts or via font-face.
The bottom line is, you take the font file that you want to use, go to cufon.shoqolate.com/generate, upload your font in the format accepted by Cufon (ttf, otf, the rest must be specified), it generates a js file based on your file, which and draws letters of your font on the canvas. Then download this file, download the cufon-yui.js file, first include cufon-yui.js in your page, then the file with rendering of your font that you downloaded, write in your main js file for the entire project, a couple of rules like

Cufon.now();
Cufon.replace('h1', { fontFamily: 'font-famyly-с-вашего скрипта' });
Cufon.replace('h2', { fontFamily: 'font-famyly-с-вашего скрипта' })

And you get rendering h1, h2 with the font that you ran through Cufon. Moreover, this rendering in html, after the script has run, will look exactly like the piece of code that you posted in the question.

I
Ivan Belenkov, 2014-11-16
@IoannGrozny

Cufon is a JS library for cross-browser substitution of custom fonts on the site. But precisely because of the canvas, this path is flawed. The text cannot be selected and copied (technically, it will generally be a picture). In addition, in order for this method to work, you need to convert the font to a heavyweight JS library.
But, if all this does not scare you, then here: Cufon .
Accordingly, the article on Habré: Cufón - use the fonts that your heart desires

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question