Come creare il tuo carattere per Windows. Come creare il tuo carattere scritto a mano. FontCreator in russo: creazione di caratteri
Ciao a tutti.
Non molto tempo fa, per essere ammessi agli esami, abbiamo riscontrato un problema: tutti coloro che avevano perso le lezioni dovevano presentare dei temi scritti a mano. Per 1-2 passaggi 1 saggio, 2-5 passaggi 2 saggi e così via. Ogni abstract è composto da almeno 10 fogli. Trovare un abstract su un argomento su Internet non è difficile, ma come trasferire il tutto su carta con il minimo sforzo?Su Internet sono stati trovati molti caratteri scritti a mano russi (link). Ma, dopo aver scaricato diverse copie di questi caratteri, divenne chiaro che nessuno avrebbe creduto all'autenticità di ciò che era scritto, e semplice controllo Non riesco a superare l'insegnante quando mi chiede di scrivere qualcosa con la stessa grafia.Pertanto è stato deciso crea il tuo carattere scritto a mano. Ma come creare un carattere dalla tua calligrafia in modo che nessuno potesse distinguerlo e tu potessi dimostrare con calma che sei stato tu a scrivere?
La soluzione è stata trovata: il meraviglioso programma High-Logic FontCreator Professional 9
Carattere della grafia
Installiamo Font Creator, penso che non dovrebbero esserci problemi con questo.
- Su un foglio di carta bianco pulito scriviamo tutti i numeri, le lettere dell'alfabeto russo e inglese, oltre a quelle speciali. simboli.
- Scansioniamo (preferibilmente) o fotografiamo l'alfabeto risultante.
- In Paint, Photoshop o qualsiasi altro redattore grafico apri il nostro alfabeto scansionato (fotografato).
- Avvia il Font Creator installato:
- Fare clic su file (File) - nuovo (Nuovo) o Ctrl + N
- Diamo un nome al nostro carattere dalla scrittura a mano ( i miei caratteri. ru ), seleziona Regolare e Non includere contorni (per un contorno vuoto delle sagome).
- Appare una finestra con sagome di segni, lettere inglesi e qualche altro alfabeto. Ora aggiungiamo le lettere dell'alfabeto russo:
1. Fare clic su Inserisci nella riga superiore e selezionare Caratteri.
2. Davanti a te appare una tabella con le lettere e i simboli del tuo carattere scritti a mano, scorri fino alla fine della tabella fino alle lettere dell'alfabeto russo.
3. Seleziona la lettera "A" e fai clic su Aggiungi, quindi seleziona "I" e fai clic su Aggiungi.
4. Allo stesso modo, aggiungi le lettere “Ё”, “е” e le lettere degli altri alfabeti di cui hai bisogno.
5. Nel campo "Aggiungi questi caratteri...", sostituisci la virgola con un trattino compreso tra $ 0410 e $ 044F.6. Di conseguenza, nel campo Aggiungi questi caratteri... dovrebbe essere scritto in questo modo: $0410-$044F,$0401,$0451
7. Fare clic su OK.
I simboli russi e tutte le lettere e i segni che hai aggiunto verranno visualizzati nel tuo modello.
Eliminiamo tutti i caratteri che non ci servono (tranne i primi quattro, sono di sistema).
Se non l'hai ancora aperto, è ora di farlo.
Nell'editor grafico, seleziona la prima lettera e copia ( Ctrl +C) in Font Creator, seleziona questa lettera e fai clic su Inserisci ( CTRL+V)
La riga più bassa 1 (Win Descent) è il limite massimo per le lettere con una coda (ts, y, shch, z, r, d); tutto ciò che è al di sotto di questa riga non verrà stampato.
La linea 2 (Baseline) è la linea di supporto di ciascuna lettera. Tutte le lettere devono trovarsi su questa riga.
Linea 3 (x-Height) - altezza massima delle lettere minuscole.
Linea 4 (CapHeight): l'altezza massima di lettere grandi, numeri e lettere “c”, “d”, “b”.
Linea 5 (WinAscent ) - il limite superiore di caratteri, tutto ciò che è al di sopra di questa riga non verrà stampato.
Le linee verticali sinistra (6) e destra (7) determinano il modo in cui le lettere del tuo carattere si toccheranno. Se vuoi che le lettere si tocchino come nel manoscritto, sposta la lettera vicino a quella di sinistra (6) e sposta quella destra (7) sulla lettera in modo che lecchi leggermente oltre la linea.
Adattiamo tutte le lettere alle linee, altrimenti i caratteri del carattere saranno posizionati in modo casuale e, di conseguenza, non sarà bello.Un esempio della disposizione di diverse lettere:
OK, è tutto finito adesso. Installa il tuo carattere e avvia editor di testo, trova il tuo carattere e divertiti a usarlo. Come installare un carattere.
Se sei troppo pigro per fare tutto quanto sopra descritto e desideri ottenere un carattere professionale dalla tua calligrafia, stiamo aspettando i tuoi ordini sul nostro sito web
Crea il tuo carattere
Ciao ragazzi. Come promesso, ti dico come creare il tuo font.
Dirò subito che non fornisco un link per scaricare il programma qui, ma non sarà difficile per te trovarlo da solo. Il programma si chiama High-Logic Font Creator, ho iniziato con quello, e questo il modo più semplice trasforma le lettere che hai disegnato in un vero e proprio carattere. Se notate qualche errore, scrivete, perché tutto questo è stato fatto in modo quasi intuitivo, e non pretendo affatto che sia un'esecuzione magistrale :) E come al solito, le immagini più grandi si apriranno cliccando.
Amici che si occupano di font in modo professionale, non giurate, qui praticamente non ci saranno termini o regole. Il post è destinato a coloro che hanno sempre desiderato creare qualcosa di simile, ma non sapevano come avvicinarsi :)
Quindi, la prima cosa che dobbiamo fare è disegnare lettere, numeri, simboli, cioè tutto ciò di cui hai bisogno. Ho disegnato questo set per stock, oggi lo trasformerò in un font. Non ci sono lettere minuscole piccole, quindi disegna anche quelle per rendere il carattere pieno. 
Disegno tutto in Illustrator, ma dipende da te. Molte persone semplicemente scrivono su carta e scansionano, anche questa è un'opzione.
Successivamente è necessario salvare ciascuna lettera separatamente. Questo è tutto, ora apri il programma.
La nostra prima azione è abbastanza ovvia: File - Nuovo... Vediamo la finestra:
Nella finestra, inserisci il nome del nostro carattere nel campo Nome famiglia caratteri, seleziona Unicode, Normale, Non includere contorni. Queste sono le mie impostazioni :)
Fare clic su OK, vediamo che il modello di carattere si è aperto con tutto lettere possibili, numeri e altri simboli.
Non ricordo quale sia il carattere predefinito, ho impostato il modello di carattere Arial. Per cambiare il carattere, aggiungere lettere, devi andare su Inserisci - Caratteri, questo è dentro pannello superiore. Puoi anche aggiungere il cirillico lì, ma per ora non lo faremo.
Successivamente, la cosa più importante è aggiungere le nostre lettere. Trova la lettera maiuscola A e fai doppio clic su di essa.
Vediamo una finestra con un mucchio di celle e strisce.
Andiamo nel panico, minimizziamo il programma, facciamo un respiro profondo e torniamo indietro. Ora Dina spiegherà tutto.
Ogni striscia ha il suo scopo, ma prima di tutto. In questa finestra, fai clic con il pulsante destro del mouse in un punto qualsiasi e fai clic su Importa immagine.
Ricordiamo dove abbiamo salvato tutte le nostre lettere, troviamo la nostra A, apriamola. Un'altra finestra:
Non c'è niente di complicato qui, sposta il cursore, fai clic su tutto ciò che vedi, l'anteprima ti dirà quali impostazioni è meglio impostare. L'immagine mostra il mio, puoi provare lo stesso. Fare clic su Genera. Ecco la nostra lettera:
Quindi, quello che vediamo: due strisce verticali e cinque orizzontali.
La lettera dovrebbe trovarsi tra due strisce verticali, indicano la distanza prima e dopo la lettera. Non posizionarli troppo vicini o direttamente sulla lettera, altrimenti sarà un disastro.
E ora sulle linee orizzontali. Non ti appesantirò di termini, lo spiegherò in modo popolare:
1. La barra più in alto rappresenta la distanza massima sopra la linea di base (4).
2. La seconda dall'alto è l'altezza delle lettere maiuscole.
3. La terza è l'altezza delle lettere minuscole.
4. La linea di base lungo la quale sono allineate tutte le lettere.
5. Distanza massima sotto la linea di base (4).
Per modificare i parametri delle linee orizzontali, è necessario aprire Impostazioni nella scheda Formato. Ti consiglio di cercare su Google i parametri di alcuni caratteri popolari e di usarli come esempio se vuoi cambiare qualcosa. Ma non ho fatto niente del genere :)
Come puoi vedere, ho aumentato la lettera alla riga 2, CapHeight, non resta che regolare le strisce verticali. Voglio che ci sia una distanza decente prima e dopo la lettera, quindi sposto la lettera stessa dalla linea di sinistra, prendo quella di destra vicino al triangolo nero in alto e la sposto più vicino alla lettera. Come questo:
Questo è esattamente quello che farò con tutte le mie lettere maiuscole. Se aggiungi lettere minuscole, aumenta l'altezza fino alla riga numero 3.
Dopo aver posizionato la lettera, chiudiamo semplicemente questa finestra. Tutte le lettere andranno a posto e questo è evidente:
Ho una lettera Q con una coda, non voglio che risalti rispetto alla fila generale di lettere, quindi la posiziono sulla linea di base e lascio la coda sotto.
Fai lo stesso con tutte le lettere minuscole (p, q, y, g, j) e alcune, al contrario, potrebbero essere leggermente più alte della lettera maiuscola (d, b, k, f).
Non ho ancora bisogno dei numeri, quindi la mia immagine è simile a questa:
Se non vedi l'ora di provare le lettere in azione, allora vai su File - Salva con nome, salva il font nel formato .ttf suggerito dal programma.
Installiamo il carattere, andiamo all'editor di testo, troviamo il nostro carattere, controlliamolo. Lavori!
Bene, ora puoi sbizzarrirti. Scattiamo la foto peggiore dei fuochi d'artificio del 9 maggio, facciamo un po' di magia in Photoshop, digitiamo il testo e voilà! :)
Non è così difficile, vero? Assicurati di provarlo e mostraci i risultati :)
Per creare i font consiglio di utilizzare un editor FontCreator dall'Alta Logica. Dirò subito che il programma è a pagamento, ma questa è l'opzione migliore che ha attirato la mia attenzione. Se avete bisogno redattore gratuito caratteri, prestare attenzione al programma Digita luce da cr8software e Servizio Online Studio del glifo. Continuerò con FontCreator (se non sbaglio era la versione 6.0).
Passo 1: e quindi, avvia l'editor e usa il comando: File > Nuovo(File > Nuovo): crea un nuovo carattere. Nella finestra che si apre Nuovo carattere (dall'inglese) Nuovo carattere ) , dovrai specificare una serie di parametri:
- Nome della famiglia di caratteri- nome della famiglia di caratteri, ad es. solo il nome del carattere, qualcosa del genere Times New Roman, ho sottolineato Il mio carattere.
- Set di caratteri- un insieme di caratteri inclusi nel carattere, consiglio di scegliere Unicode (caratteri).
- Stile carattere- stile del carattere, per ogni stile è necessario creare un file separato. Per lo stile carattere normale (predefinito), seleziona l'opzione Regolare.
- Contorni predefiniti- circuiti integrati. Ti consiglio di selezionare l'opzione Non includere contorni, che ti consentirà di creare un contorno pulito delle sagome.
Passo 2: davanti a te apparirà una finestra con una forma di sagome di alcuni simboli, numeri e Lettere latine. Per aggiungendo l'alfabeto cirillico al carattere, è necessario effettuare le seguenti operazioni:
2.1. Usando il comando: Inserisci > Caratteri... (Inserisci > Simboli...)- Apri la finestra Inserisci caratteri(dall'inglese) inserimento di caratteri).
In questo caso, potresti ricevere il seguente messaggio:
Questa operazione non è annullabile. Vuoi continuare?
Ti informa che l'operazione è irreversibile e per completarla devi confermare la tua azione, premere il pulsante “ SÌ».
2.2. Successivamente, davanti a te apparirà una tabella di simboli. Per comodità, nell'elenco Caratteri seleziona il carattere Arial. Sulla lista Vai a Blocco Unicode Selezionare cirillico. Utilizzando il campo Carattere selezionato, guarda il codice delle lettere “A” ($0410) e “I” ($044F). Nel campo Aggiungi questi caratteri e/o intervalli di caratteri... aggiungiamo i caratteri e/o l'intervallo di caratteri necessari, nel nostro caso è: $0410-$044F . Fare clic sul pulsante " OK».
2.3. I simboli delle lettere cirilliche verranno aggiunti al modulo del carattere. Allo stesso modo, ma separatamente, puoi aggiungere le lettere “е” ($0451) e “Ё” ($0401), che non erano incluse nell'intervallo di caratteri specificato nel passaggio precedente.
Passaggio 3: Ora puoi iniziare a creare simboli. Qui, oltre all'editing vettoriale, utilizzando gli strumenti appropriati, FontCreator ti consente di creare caratteri dalle immagini convertendole in un'immagine vettoriale. Ovviamente per ogni simbolo dovrai disegnare un'immagine separata.
3.1. Ad esempio, disegno una lettera maiuscola "A".
3.2. In linea di principio, dopo la scansione, questo file immagine può essere utilizzato per l'importazione. Per fare ciò, seleziona un'immagine nel modulo il simbolo desiderato. Quindi utilizzando il comando: Strumenti > Importa immagine... (Strumenti > Importazione immagini)- Apri la finestra Importa immagine raster (dall'inglese) importare bitmap) .
3.3. Nella finestra che si apre, clicca sul pulsante Carico…» (dall'inglese) scaricamento) e seleziona il file immagine che ti serve.
3.4. Spostamento del cursore Soglia (dall'inglese) soglia) Imposta il livello di scurimento dell'immagine per creare un contorno più chiaro. Puoi anche utilizzare i filtri:
- Filtro liscio- filtro levigante.
- Erodere- sfocatura, rende il simbolo più audace.
- Dilatare- l'allungamento rende il carattere più sottile.
Modalità di importazione (dall'inglese) modalità di importazione) meglio lasciarlo Traccia, per convertire in curve. CON Negativo (dall'inglese) negativo) , penso che tutto sia chiaro. Quindi fare clic sul pulsante creare».
Passaggio 4: Passando alla modalità di modifica, facendo doppio clic sul simbolo nel modulo, tutto ciò che devi fare è correggere le irregolarità, regolare la dimensione e impostare la linea di rientro. Dovrai fare lo stesso per gli altri simboli.
In generale, il processo di creazione di un carattere non può essere definito particolarmente difficile. Ciò richiede pazienza e molto tempo. Utilizzando l'editor di caratteri FontCreator, questa volta può essere salvata in molti modi importando e convertendo l'immagine di un carattere in un vettore. Tuttavia, anche questa opzione richiede molto lavoro. Questo è tutto quello che ho. Grazie per l'attenzione. Buona fortuna!
Mi sembra che molti di coloro che sono appassionati di disegno di lettere e di creazione di lettering ad un certo punto abbiano il pensiero: non dovremmo trasformare tutta questa bellezza in un font? In modo che tu possa non solo ammirare una composizione specifica, ma anche stampare queste bellissime lettere su una vera tastiera e creare ancora più bellezza... Beh, almeno per me è stato così :) Quando ho capito che puoi creare un carattere te stesso, mi è letteralmente accaduta una rivoluzione della coscienza (probabilmente questo è esattamente quello che in inglese viene chiamato “aha-moment”).
E ho iniziato a cercare di capire come farlo. C'erano poche informazioni e ciò che c'era era incomprensibile e complesso. Mi sono perso in questa fitta foresta di termini e ho quasi abbandonato l’idea di imparare a creare font. Ma per miracolo non mi sono arreso, ho continuato a provare e ho realizzato il mio primo font Bronks, tutt'altro che ideale, ma molto prezioso in termini di esperienza. A proposito, ho già scritto su come è stato creato il Bronx. E oggi voglio raccontarti più in dettaglio il processo di creazione di un font nel suo insieme, in modo che sia più facile per te capire se questa è la “tua” attività e se saresti interessato a provarla.
IL CARATTERE INIZIA CON BRIEF
DISEGNARE GLYPH È IL LAVORO DEL GIORNO :)
Dopo aver raccolto il coraggio, cioè l'ispirazione, di solito aspetto di avere almeno mezza giornata libera (idealmente l'intera giornata) e mi siedo per disegnare glifi. I glifi sono i caratteri di un carattere, sia lettere che numeri, e tutti quei simboli come più, virgola, punto interrogativo e così via.
L'ampiezza del disegno di un font, ovvero il numero di glifi che creo, dipende direttamente dal pubblico di destinazione. È chiaro che più glifi, più prezioso è il carattere, ma allo stesso tempo ci sono glifi su cui vale la pena dedicare del tempo, e ci sono quelli che non lo sono così tanto (ad esempio, se stai creando un carattere standard per drone per le piccole imprese, un ampio supporto linguistico sarà molto più rilevante di tutti, tutti, tutti i segni matematici, molti dei quali, a dire il vero, ho visto per la prima volta nel programma Glyphs :)). Parlerò in dettaglio di quali glifi dovrebbero essere necessariamente disegnati, e quali inoltre e in quali quantità, nel workshop sulla creazione di un carattere su cui sto lavorando duramente (a questo proposito alla fine della nota :)).
Posso dire brevemente che consiglierei di rendere il primo carattere semplice e conciso, altrimenti, se provi immediatamente a creare sia la versione iniziale che quella finale delle lettere e aggiungi l'alfabeto cirillico all'alfabeto latino, semplicemente non completerai il carattere (e se lo completi, difficilmente ti ripagherà, perché nella digitazione non puoi fare a meno di errori, la capacità di vedere piccole macchie e dettagli che influiscono sulla qualità del carattere appare solo con la pratica). Pertanto, all'inizio è meglio accontentarsi dello standard impostare dalla A alla Z, a-z, 0-9, segni di punteggiatura di base.
Perché dedico mezza giornata a disegnare un font? Perché quando “prendi l'onda”, cioè senti un certo stile, l'atmosfera del carattere, è meglio disegnare tutto in una volta, mentre la mano si sviluppa. Questo probabilmente si applica maggiormente ai caratteri scritti a mano (non ne ho ancora provati altri). Se lo metti da parte e provi a disegnare il resto delle lettere in seguito, saranno sicuramente diverse e ci vorrà del tempo per "accordare di nuovo la mano" e iniziare a cadere nello stile generale.
Disegnare un font è il processo più creativo di tutti. Se credi ingenuamente che la creazione di font sia tutta una questione di creatività e celebrazione dell'ispirazione, mi affretto a deluderti: la creatività e il disegno di lettere richiedono al massimo il 20% (solitamente meno) del tempo necessario per creare un font. Il resto è tecnologia: scansione, elaborazione, allineamento alfabetico, messa a punto, esportazione in un programma, spaziatura e crenatura, impostazioni del codice, test e tutta quella roba. Pertanto, se vuoi solo disegnare lettere e per te è noioso anche solo pensare alla parte tecnica, allora è meglio creare lettere.
PARTE DIGITALE DEL PROCESSO
Una volta disegnato il carattere, è il momento di digitalizzarlo. La mia catena di elaborazione è questa: scanner - photoshop - illustratore. Nello scanner imposto il massimo, in Photoshop aumento il contrasto e pulisco un po' i contorni, in Illustrator faccio una traccia, trovo l'alfabeto (cioè dispongo le lettere in sequenza, provo a “assemblare” un poche parole per controllare come appare il tutto) e pulito-pulito- sto pulendo le lettere.
Per quanto riguarda la fase di pulizia, pensavo "perché pulirlo, è un carattere scritto a mano". Ma in seguito questo dettaglio è stato rivelato: più punti ci sono nel vettore, maggiore è la probabilità che il carattere sia difettoso in ogni modo possibile - dal rifiuto di Glyphs (o di un altro programma in cui verrà assemblato il carattere) di esportare il file , all'impossibilità per gli utenti finali di utilizzarlo senza errori. Pertanto, un minimo di punti è la chiave per il comfort e sì, è comunque necessario pulirli, anche i caratteri con texture.
Pulisco le lettere in Illustrator in diversi modi: in primo luogo, con una gomma magica di Astute Graphics (part plug-in a pagamento, di cui sto parlando), purtroppo alternativa gratuita Non conosco nemmeno la qualità approssimativa, in secondo luogo, con una matita da illustratore standard: evidenzio il contorno e lo rendo più accurato.
Successivamente, preparo il carattere per l'esportazione - questa è una grande storia separata, sulla quale molto probabilmente ci saranno diversi video - e trasferisco le lettere su Glifi.
UN BUON PROGRAMMA DI FONT È IMPORTANTE
Assemblare un font, cioè trasformare le lettere vettoriali in lettere funzionanti, di quelle che possono essere digitate su una tastiera, in teoria può essere fatto in diversi programmi. Se cerchi su Google, troverai elenchi impressionanti di opzioni per ogni gusto e budget. Non elenco i nomi qui perché non sono pronto a consigliare qualcosa che non conosco/non ho mai provato. Lavoro nel programma Glyphs e so solo che tutti i type designer seri (quelli che vendono font) li realizzano in Glyphs o in Fontlab. Ciò è molto probabilmente dovuto al fatto che i programmi più economici/gratuiti non forniscono tutte le opzioni necessarie per creare storie di font interessanti.
Un tempo ho scelto i glifi perché volevo, da un lato, abituarmi immediatamente al programma di font "corretto" (cioè uno che possa essere utilizzato per creare font davvero ponderati, complessi, ricchi di elementi e non attaccare in giro per un mese in qualche gratuito) solo per poi scoprire che lì non è possibile creare legature condizionali), d'altra parte non ero pronto a pagare molte volte di più per Fontlab. Apparentemente la scelta è stata quella giusta: conosco persone che sono passate da Fontlab a Glyphs e dicono che quest'ultimo ha un'interfaccia più chiara :)
Un buon programma di font è importante perché è qui che avviene la magica trasformazione delle semplici lettere in un font funzionante. Se il programma non ti consente di creare il supporto linguistico, non sarai in grado di crearlo. Se non puoi aggiungere una serie alternativa di lettere maiuscole, non potrai aggiungerle, anche se le hai già disegnate.
Dopo l'esportazione in Glyphs, ho impostato molte cose diverse: gruppi di lettere, spaziatura (spazio negativo a sinistra e a destra delle lettere, grosso modo), crenatura (distanze tra specifiche coppie di lettere), aggiunta del supporto linguistico, legature (speciali varianti di combinazioni di lettere), opzioni iniziali e finali (con lunghe code di cavallo, ornati, svolazzi e tutto il resto) e set alternativi, se proposti. Lungo il percorso, il codice viene configurato in modo che tutto funzioni per l'utente finale come previsto e senza problemi. Questa fase, che ho descritto in un paio di frasi, è in realtà quella che richiede circa il 70% delle volte quando si crea un font :) E la descrivo brevemente non perché sia avido, ma perché solo della crenatura si potrebbe scrivere una nota tre volte più lunga di questa, e non sarà comunque sufficiente. Nel corso sui font mi soffermerò su tutti questi punti in modo molto dettagliato (in questo momento sto cercando di trovare il confine tra “non abbastanza dettagliato” e “troppe informazioni da digerire”).
In questo articolo tutorial ti dirò come creare il tuo carattere per un sito web utilizzando le icone che hai creato tu stesso. Tutto ciò di cui abbiamo bisogno è un programma per la creazione di grafica vettoriale (Adobe Illustrator o Inkspcape) e l'accesso a Internet! Quindi, cominciamo! Puoi scaricare tutte le immagini, le icone e i font CSS utilizzati a questo scopo alla fine dell'articolo.
Per questo tutorial faremo qualcosa di semplice. Per la prima icona disegneremo una stella normale. Per la seconda icona: un'aquila con la lettera W all'interno. È abbastanza facile da disegnare e puoi creare qualsiasi forma e combinazione. Ho usato Illustrator per questi scopi.
Dopo aver completato la parte creativa, la tua creazione dovrà essere salvata in formato SVG. Fai clic su "Salva con nome" e seleziona il tipo di file come SVG. Ora puoi procedere direttamente alla creazione del carattere.
Per questi scopi utilizziamo il popolare e servizio gratuito IcoMoon.
La prima cosa da fare è creare nuovo progetto, quindi fai clic sul menu nell'angolo in alto a sinistra e fai clic su "Nuovo progetto". Successivamente, carichiamo il nostro già pronto file SVG dopo aver fatto clic sul pulsante "Importa icone". Dopo aver completato questi passaggi, dovresti vedere un'immagine come questa sul tuo monitor:
Ora abbiamo la possibilità di modificare il codice per ogni icona (nel nostro caso sarà e600 ed e601), il nome del nostro font, il prefisso CSS e così via. Tutto questo viene fatto in "Preferenze". Inoltre, possiamo vedere il carattere in azione facendo clic sul collegamento "Abilita utilizzo rapido", che ci consentirà di ottenere un collegamento temporaneo al nostro carattere, nonché l'opzione per visualizzare il codice in CodePen.
Dopo aver configurato tutto, fai clic sul pulsante “Download” in fondo alla pagina e scarica l'archivio. In questo archivio troverai il tuo font nei formati ttf, eot, svg e woff + una pagina demo con il font.
Utilizzo delle icone sul sito
Ora, tutto ciò di cui abbiamo bisogno è includere il carattere CSS utilizzando @font-face e specificare altri parametri (sono tutti scritti nel file css nell'archivio che hai scaricato.
@font-face ( font-family: "wdm-eagle"; src: url("//nomesitoweb.com/fonts/wdm-eagle.eot"); , ( font-family: "wdm-eagle"; parla: none; font-style: normale; font-weight: normale; font-variant: normale; text-transform: none; line-height: 1; /* Migliore resa dei caratteri =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: scala di grigi; ) .wdm-star:prima ( contenuto: "\e600"; ) .wdm-eagle:prima ( contenuto: "\e601"; )
Ora possiamo usare il nostro carattere nel codice HTML in questo modo:
Specificare il nome della classe per il tag otteniamo la nostra icona.
