doc:appunti:linux:sa:fontforge_webfont
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision | ||
doc:appunti:linux:sa:fontforge_webfont [2017/01/24 11:51] – [Metodo di lavoro] niccolo | doc:appunti:linux:sa:fontforge_webfont [2017/01/26 16:49] – [Metodo di lavoro] niccolo | ||
---|---|---|---|
Line 5: | Line 5: | ||
<code html> | <code html> | ||
< | < | ||
- | <link href="font-awesome/ | + | <link href=" |
</ | </ | ||
Line 62: | Line 62: | ||
* //Element// => //Font Info...// => //General// | * //Element// => //Font Info...// => //General// | ||
* Per i font TrueType la dimensione complessiva è in genere una potenza di 2, ad esempio 2048. Per i font PostScript in genere invece è 1000. Adottiamo la convenzione Webdings, per cui **Ascent** = **1638** e **Descent** = **410**, per un totale di 2048. | * Per i font TrueType la dimensione complessiva è in genere una potenza di 2, ad esempio 2048. Per i font PostScript in genere invece è 1000. Adottiamo la convenzione Webdings, per cui **Ascent** = **1638** e **Descent** = **410**, per un totale di 2048. | ||
- | * FIXME Predisporre lo spazio | + | * Creare gli slot (spazi) per i caratteri: // |
* //File// => //Save as...// | * //File// => //Save as...// | ||
Line 75: | Line 75: | ||
===== Metodo di lavoro ===== | ===== Metodo di lavoro ===== | ||
- | - Aprire il //glyph-template.svg// in Inkscape | + | - Aprire il **glyph-template.svg** in Inkscape. |
- Disegnare il singolo carattere, utilizzando tutte le primitive del caso, ecc. | - Disegnare il singolo carattere, utilizzando tutte le primitive del caso, ecc. | ||
- | - Salvare il disegno originale per eventuali modifiche future, mantenendo i raggruppamenti, | + | - Salvare il **disegno originale** per eventuali modifiche future, mantenendo i raggruppamenti, |
- | - Convertire | + | - Convertire tutti gli //object// e // |
- | - In FontForge aprire il font, fare doppio click sul simbolo in lavorazione | + | - In FontForge aprire il font e **aggiungere gli //slot//** necessari a contenere i caratteri da importare: // |
- | - Aggiustare posizione del glyph e larghezza del carattere. | + | - Fare doppio click su uno slot vuoto e **importare il carattere** dal menu //File// => // |
+ | - Aggiustare | ||
+ | - Per evitare errori e problematiche nella geometria dei caratteri conviene ripulire il disegno con questi passaggi: | ||
+ | - //Element// => // | ||
+ | - //Element// => **//Add Extrema//** per aggiungere dei punti ai quattro estremi del disegno, se non ci sono (consigliato per gestire più facilmente l' | ||
+ | - //Element// => //Round// => **//To Int//** per convertire le coordinate dei punti in numeri interi (richiesto dal formato TTF). | ||
+ | - Definire il nome del glyph e il suo // | ||
+ | * **Glyph Name**, ad esempio **flower** (accetta solo caratteri alfanumerici, | ||
+ | * **Unicode Value**: da **U+f000** in poi. | ||
+ | In Inkscape esisterebbe la funzione dal menu //Text// => **//SVG Font Editor//** con la quale è possibile aggiungere un set di caratteri all' | ||
==== Consigli ==== | ==== Consigli ==== | ||
Line 97: | Line 106: | ||
* Centrare verticalmente: | * Centrare verticalmente: | ||
+ | === Riordinare i caratteri negli slot di FontForge === | ||
+ | |||
+ | Sembra che non ci sia un sistema rapido per riodrinare i glyph negli slot, ad esempio per inserirne uno nuovo e spostare tutti i successivi. In genere si dovrà aggiungere gli slot necessari dopo quelli esistenti, fare il copia e incolla dei glyph da uno slot ad un altro (anche a gruppi), ma nome e codepoint devono essere reimpostati manualmente. | ||
+ | |||
+ | Al termine del lavoro se esistono degli slot non utilizzati è possibile compattare il font con: // | ||
+ | |||
+ | ==== Creare gli altri formati di font ==== | ||
+ | |||
+ | FontForge salva il file nel proprio formato sfd, per creare gli altri formati: | ||
+ | |||
+ | * File, Generate Fonts, TrueType => rigacci.org-webfont.ttf | ||
+ | * File, Generate Fonts, Web Open Font => rigacci.org-webfont.wof | ||
+ | * File, Generate Fonts, SVG Font => rigacci.org-webfont.svg | ||
+ | * File, Generate Fonts, OpenType (CFF) => rigacci.org-webfont.otf (non necessario) | ||
+ | |||
+ | Per convertire nel formato EOT (IE 9 Compatibility Mode) | ||
+ | |||
+ | * apt-get install eot-utils | ||
+ | * mkeot rigacci.org-webfont.ttf > rigacci.org-webfont.eot | ||
+ | |||
+ | Altro modo per convertire in WOF: | ||
+ | |||
+ | * apt-get install woff-tools | ||
+ | * sfnt2woff rigacci.org-webfont.otf (ma il woff è già ottenuto da FontForge) | ||
+ | |||
+ | ===== Riferimenti Web ===== | ||
+ | |||
+ | * [[http:// | ||
+ | * [[http:// |
doc/appunti/linux/sa/fontforge_webfont.txt · Last modified: 2017/01/26 23:56 by niccolo