Differences

This shows you the differences between two versions of the page.

--- doc:appunti:linux:sa:fontforge_webfont [2017/01/24 22:49] – [Consigli] 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>
 <head>
-  <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
+  <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
 </head>
@@ Line 62: / Line 62: @@
   * //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.
-  * FIXME Predisporre lo spazio caratteri U-F000 e successivi
+  * Creare gli slot (spazi) per i caratteri: //Encoding// => //Add Encoding Slots...//.
   * //File// => //Save as...//
@@ Line 77: / Line 77: @@
   - Aprire il **glyph-template.svg** in Inkscape.
   - Disegnare il singolo carattere, utilizzando tutte le primitive del caso, ecc.
-  - Salvare il disegno originale per eventuali modifiche future, mantenendo i raggruppamenti, le primitive, ecc.
+  - Salvare il **disegno originale** per eventuali modifiche future, mantenendo i raggruppamenti, le primitive, ecc.
-  - Convertire se necessario tutti gli oggetti in //path//, effettuare le operazioni di unione, intersezione, ecc. per ottenere **un unico oggetto da salvare come SVG**.
+  - Convertire tutti gli //object// e //stroke// in **//path//**, effettuare le operazioni di unione, intersezione, ecc. per ottenere **path di un solo contorno con zero o più buchi**. Impostare **//Fill//** e **//Stroke paint//** su //undefined// (il pulsante con il punto interrogativo), altrimenti FontForge considera il contorno come un oggetto con uno spessore proprio. È possibile mantenere più path eventualmente raggruppate. Salvare il disegno come SVG.
   - In FontForge aprire il font e **aggiungere gli //slot//** necessari a contenere i caratteri da importare: //Encoding// => //Add Encoding Slots...//.
   - Fare doppio click su uno slot vuoto e **importare il carattere** dal menu //File// => //Import...// => //Format SVG//.
   - Aggiustare **posizione** del glyph e la **larghezza** del carattere (click destro, //Set Width// oppure //Center in Width//).
+  - Per evitare errori e problematiche nella geometria dei caratteri conviene ripulire il disegno con questi passaggi:
+    - //Element// => //Simplify// => **//Simplify//** per eliminare punti ridondanti e correggere eventuali intersecazioni.
+    - //Element// => **//Add Extrema//** per aggiungere dei punti ai quattro estremi del disegno, se non ci sono (consigliato per gestire più facilmente l'ingombro di ciascun carattere).
+    - //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 //codepoint// (codice Unicode). Non è necessario che i caratteri siano ordinati negli slot secondo il loro codepoint, ma è ovviamente consigliabile. Click destro, //Glyph Info...// => //Unicode//
-    * **Glyph Name**, ad esempio **fa-chart**.
+    * **Glyph Name**, ad esempio **flower** (accetta solo caratteri alfanumerici, underscore e il punto).
     * **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'interno di un file SVG. La funzione è abbastanza primitiva (Inkscape v.0.48) e sconsigliata. In pratica si deve disegnare una path unica e senza raggruppamenti, dopo averla selezionata si clicca su //Get curves from selection...//. I glyph inseriti rimarranno all'interno del SVG indipendentemente dal disegno presente sulla pagina. Tuttavia pare che non si possa recuperare i glyph come disegni editabili, inoltre è comunque necessario lavorare con FontForge per modificare la larghezza dei caratteri.
 ==== Consigli ====
@@ Line 101: / Line 106: @@
   * Centrare verticalmente: non esiste il comando, selezionare tutto ed usare i tasti freccia
-=== Spostare i caratteri negli slot in FontForge ===
+=== 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.
@@ Line 107: / Line 112: @@
 Al termine del lavoro se esistono degli slot non utilizzati è possibile compattare il font con: //Encoding// => //Remove Unused Slots//.
+==== 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://www.koffeinfrei.org/2012/08/06/how-to-generate-a-webfont-kit-with-open-source-tools|How to Generate a Webfont]]
+  * [[http://graphicdesign.stackexchange.com/questions/17421/how-do-you-create-icon-fonts|How do you create icon fonts]]