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 revision | ||
doc:appunti:linux:sa:fontforge_webfont [2017/01/24 12:49] – [Inkscape] niccolo | doc:appunti:linux:sa:fontforge_webfont [2017/01/27 00:56] (current) – [Creare gli altri formati di font] 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. | ||
+ | * Creare gli slot (spazi) per i caratteri: // | ||
* //File// => //Save as...// | * //File// => //Save as...// | ||
Line 72: | Line 73: | ||
* Salvare il template vuoto: //File// => //Save As...// ad esempio come **glyph-template.svg**. | * Salvare il template vuoto: //File// => //Save As...// ad esempio come **glyph-template.svg**. | ||
- | ==== 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 ==== | ||
- | ==== Inkscape: salvare il disegno originale | + | === Inkscape: salvare il disegno originale === |
Conviene disegnare i glyph con Inkscape perché ha tutti gli strumenti opportuni di disegno. In genere si dovrà salvare il disegno originale in cui esistono tutte le primitive utilizzate per realizzare il singolo carattere; solo come passo finale si potrà trasformare gli oggetti in path, effettuare le opportune operazioni di unione, intersezione, | Conviene disegnare i glyph con Inkscape perché ha tutti gli strumenti opportuni di disegno. In genere si dovrà salvare il disegno originale in cui esistono tutte le primitive utilizzate per realizzare il singolo carattere; solo come passo finale si potrà trasformare gli oggetti in path, effettuare le opportune operazioni di unione, intersezione, | ||
- | ==== Allineare ogni carattere in FontForge | + | === Allineare ogni carattere in FontForge === |
Dopo aver importato il singolo carattere come SVG è necessario impostare la larghezza e allineare correttamente il glyph nello spazio. Questi alcuni comandi utili: | Dopo aver importato il singolo carattere come SVG è necessario impostare la larghezza e allineare correttamente il glyph nello spazio. Questi alcuni comandi utili: | ||
Line 96: | 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 | ||
+ | |||
+ | Per convertire nel formato **EOT** (IE 9 Compatibility Mode) | ||
+ | |||
+ | * apt-get install eot-utils | ||
+ | * mkeot rigacci.org-webfont.ttf > rigacci.org-webfont.eot | ||
+ | |||
+ | Un modo alternativo per ottenere il formato WOF è generare il font OpenType con FontForge (estensione OTF) e poi usare il tool sfnt2woff fornito dal pacchetto **woff-tools**. | ||
+ | ===== Riferimenti Web ===== | ||
+ | |||
+ | * [[http:// | ||
+ | * [[http:// |
doc/appunti/linux/sa/fontforge_webfont.txt · Last modified: 2017/01/27 00:56 by niccolo