Come aggiungere un carattere non standard a un sito Web?

519

C'è un modo per aggiungere un carattere personalizzato su un sito Web senza usare immagini, Flash o altri elementi grafici?

Ad esempio, stavo lavorando su un sito Web per matrimoni e ho trovato un sacco di bei caratteri per quell'argomento. Ma non riesco a trovare il modo giusto per aggiungere quel carattere sul server. E come posso includere quel carattere con CSS nell'HTML? È possibile fare a meno della grafica?

html  css  fonts  font-face 
— Vaske
fonte
18
Da quando questa domanda è stata posta, @font-faceè diventata molto più ampiamente supportata ed è raccomandata per un uso generale. Devi solo essere consapevole che IE richiede caratteri in un formato diverso rispetto ad altri browser. Vedi stackoverflow.com/questions/2219916/is-font-face-usable-now
— David Johnstone,
10
Assicurati di avere il diritto di distribuire il carattere!
— Viet,
2
Visita typekit.com , o per il fontsquirrel.com
— bjudson
1
— Adrien Be
3
www.fontsquirrel.com sembra ottimo per generare i file di font richiesti e creare una buona sintassi @fontface a prova di proiettile (uguale alla fontspring.com/blog/fixing-ie9-font-face-problems consigliata )
— Adrien Be

Risposte:

500

Questo potrebbe essere fatto tramite CSS:

<style type="text/css">
@font-face {
    font-family: "My Custom Font";
    src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont { 
    font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>

È supportato per tutti i browser normali se si utilizzano TrueType-Fonts (TTF) o Web Open Font Format (WOFF).

— hangy
fonte
13
Sia Internet Explorer che Firefox NON sono basati su Webkit, quindi secondo me è una soluzione abbastanza inutile.
— Casper,
58
Non è inutile poiché è standard: più lo implementi, più sarà probabilmente implementato dai browser. Ciò non significa che non dovresti trovare un altro modo per compensare, ma usarlo come complemento mi sembra buono.
— e-soddisf
8
Firefox 3.1 supporta @ font-face, però.
— Ms2ger,
2
@brendanjerwin: versione aggiornata del tuo link - brendanjerwin.com/development/web/2009/03/03/…
— Matt Ball,
60
Ehi ragazzi, indovinate un po '? Ora è quasi il 2016! Ora è ampiamente supportato! Sìì! Sono contento di aver trovato questa risposta così tardi. Haha.
— jessica,
121

Puoi aggiungere alcuni caratteri tramite Google Web Fonts .

Tecnicamente, i caratteri sono ospitati su Google e li colleghi nell'intestazione HTML. Quindi, puoi usarli liberamente nei CSS con @font-face( leggi a riguardo ).

Per esempio:

Nella <head>sezione:

 <link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

Quindi nei CSS:

h1 { font-family: 'Droid Sans', arial, serif; }

La soluzione sembra abbastanza affidabile (anche Smashing Magazine la usa per il titolo di un articolo ). Tuttavia, non ci sono così tanti caratteri disponibili finora nella directory dei caratteri di Google .

— Michał Pękała
fonte
1
Nel luglio 2014, Google ha ampliato i caratteri e incluso caratteri Google Noto che supportano la maggior parte delle lingue google.com/get/noto/# . Abobe ha supportato questa iniziativa di carattere aperto a supporto di tutte le lingue blog.typekit.com/2014/07/15/introducing-source-han-sans
— vsingh
sembra (Google web fonts) non supporta le versioni .eot e .woff e .svg dei caratteri. supporta solo la versione .ttf dei caratteri!
— Mahdi Jazini,
77

La strada da percorrere è usare la dichiarazione CSS @ font-face che consente agli autori di specificare i caratteri online per visualizzare il testo sulle loro pagine web. Consentendo agli autori di fornire i propri caratteri, @ font-face elimina la necessità di dipendere dal numero limitato di caratteri che gli utenti hanno installato sui propri computer.

Dai un'occhiata alla seguente tabella:

inserisci qui la descrizione dell'immagine

Come puoi vedere, ci sono diversi formati che devi conoscere principalmente a causa della compatibilità tra browser. Lo scenario nei dispositivi mobili non è molto diverso.

soluzioni:

1 - Compatibilità completa del browser

Questo è il metodo con il supporto più profondo possibile in questo momento:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

2 - La maggior parte del browser

Le cose si stanno spostando pesantemente verso WOFF , quindi probabilmente puoi cavartela con:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

3 - Solo i browser più recenti

O anche solo WOFF.
Quindi lo usi in questo modo:

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

Riferimenti e ulteriori letture:

Questo è principalmente ciò che devi sapere sull'implementazione di questa funzione. Se vuoi fare ulteriori ricerche sull'argomento, ti incoraggio a dare un'occhiata alle seguenti risorse. La maggior parte di ciò che ho messo qui è estratto da quanto segue

— Javier Cadiz
fonte
2
Lo strumento Font Squirrel estremamente utile è in grado di generare i CSS necessari per il supporto completo del browser. Ti consente persino di caricare il carattere in uno di questi formati, di convertirlo in tutti gli altri formati e di scaricarli tutti. È un salvavita quando si tratta di caratteri personalizzati.
— Jacob Stamm,
Cosa significa svgFontName? Devo cambiarlo con il nome della mia famiglia di caratteri o lasciarlo così com'è?
— Gherman,
17

Se per carattere non standard, intendi un carattere personalizzato di un formato standard, ecco come lo faccio, e funziona per tutti i browser che ho controllato finora:

@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.eot") /* EOT file for IE */
}
@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.ttf") /* TTF file for CSS3 browsers */
}

quindi avrai solo bisogno dei caratteri ttf ed eot. Alcuni strumenti disponibili online possono effettuare la conversione.

Ma se vuoi allegare un carattere in un formato non standard (bitmap, ecc.), Non posso aiutarti.

— BiAiB
fonte
1
Esempio di strumento online: kirsle.net/wizards/ttf2eot.cgi Esempio di strumento offline: code.google.com/p/ttf2eot/wiki/Demo - dovrebbe anche essere possibile utilizzare i caratteri WOFF .
— Wilf,
11

Ho scoperto che il modo più semplice per avere caratteri non standard su un sito Web è usare sIFR

Implica l'uso di un oggetto Flash che contiene il carattere, ma si degrada bene in testo / carattere standard se Flash non è installato.

Lo stile è impostato nel CSS e JavaScript imposta la sostituzione Flash per il testo.

Modifica: (consiglio comunque di usare immagini per caratteri non standard poiché sIFR aggiunge tempo a un progetto e può richiedere manutenzione).

— opaco
fonte
24
Che idea terribile! Ho il flash nel mio browser ma anche il flashblock. Su quel sito web, il mio browser mostra una pagina orribile deturpata. Flash dovrebbe rimanere qualcosa che usi per animazioni o film di grandi dimensioni. Troppo flash è ansioso e visivo, mio ​​mio ...
— e-satis
2
@ e-satis: in che modo? Personalmente, non noto mai la differenza tra una pagina che utilizza sIFR e una che non lo fa, a parte le sottili differenze di rendering del testo. Penso che sia un'ottima idea, onestamente, anche se @font-faceè molto meglio dove supportato.
— Sasha Chedygov,
"Modifica: (consiglio comunque di usare immagini per caratteri non standard poiché sIFR aggiunge tempo a un progetto e può richiedere manutenzione)." davvero ben detto. sIFR è una tecnica davvero interessante, ma sembra richiedere molto per ottenere il risultato ESATTO che desideri. Se hai il tempo di imparare e padroneggiare questa tecnica, la consiglio vivamente. Ma se stai cercando una tecnica di sostituzione dei font semplice e veloce, utilizzerei la sostituzione delle immagini o anche la proprietà @ font-face css
— Derek Adair,
10

Typeface.js e Cufon sono altre due opzioni interessanti. Sono componenti JavaScript che rendono speciali i dati dei caratteri in formato JSON (che puoi convertire dai formati TrueType o OpenType sui loro siti Web) tramite il nuovo elemento <canvas> in tutti i browser più recenti tranne Internet Explorer e tramite VML in Internet Explorer.

Il problema principale con entrambi (a partire da ora) è che la selezione del testo non funziona o almeno funziona in modo piuttosto imbarazzante.

Tuttavia, è molto bello per i titoli. Testo del corpo ... Non lo so.

Ed è sorprendentemente veloce.

— Tommaso
fonte
Un'altra opzione interessante è typekit.com Concetto simile.
— Zack,
8

Oppure potresti provare sIFR . So che usa Flash, ma solo se disponibile. Se Flash non è disponibile, visualizza il testo originale nel suo carattere originale (CSS).

— Casper
fonte
4

La tecnica raccomandata dal W3C per fare questo si chiama "incorporamento" ed è ben descritta dai tre articoli qui: Incorporamento dei caratteri . Nei miei esperimenti limitati, ho trovato questo processo soggetto a errori e ho avuto un successo limitato nel farlo funzionare in un ambiente multi-browser.

— Steve Moyer
fonte
4

Safari e Internet Explorer supportano entrambi la regola CSS @ font-face, tuttavia supportano due diversi tipi di font incorporati. Firefox prevede di supportare presto lo stesso tipo di Apple. SVG può incorporare caratteri, ma non è ancora ampiamente supportato (senza plug-in).

Penso che la soluzione più portatile che abbia mai visto sia usare una funzione JavaScript per sostituire i titoli ecc. Con un'immagine generata e memorizzata nella cache sul server con il tuo font preferito - in questo modo devi semplicemente aggiornare il testo e non devi cose in giro in Photoshop.

— zobier
fonte
Questo non deve essere fatto con JavaScript. So che a molte persone piace usare JavaScript per un bel po 'di cose al giorno d'oggi, ma una tecnica CSS standard potrebbe essere più appropriata qui. Vedi sitepoint.com/article/header-images-css-xhtml
— hangy
Mi dispiace se c'è confusione, la tecnica non si riferisce al metodo di sostituzione delle immagini che, come dici tu, può essere CSS. Si tratta di generare elementi grafici che rappresentano una determinata stringa in un determinato carattere / stile, al volo, sul server - ovviando alla necessità di crearli manualmente.
— Zobier,
4

Se si utilizza ASP.NET, è davvero semplice generare caratteri basati su immagini senza effettivamente installare (come nell'aggiunta alla base di caratteri installata) caratteri sul server utilizzando:

PrivateFontCollection pfont = new PrivateFontCollection();
pfont.AddFontFile(filename);
FontFamily ff = pfont.Families[0];

e quindi disegnare con quel carattere su a Graphics.

— mattlant
fonte
1
bene, sì ... E l'utente può dimenticare di copiare e incollare. E anche lo zoom, nei vecchi browser. Non parlo nemmeno di problemi di larghezza di banda!
— e-soddisf
2
Sì, ok, e la domanda specificava che lo avrebbe usato per il contenuto del testo? No, non era una domanda generale, e questa era una risposta generale. Piccoli frammenti di testo, intestazioni, ecc. Non occupano molta larghezza di banda. Sheesh, prendi una mano!
— Mattlant,
3

Ho fatto un po 'di ricerca e ho scavato la sostituzione del testo dinamico (pubblicato il 15-06-2004).

Questa tecnica utilizza immagini, ma sembra essere "mani libere". Scrivi il tuo testo e permetti ad alcuni script automatici di trovare e sostituire automaticamente la pagina per te al volo.

Ha alcune limitazioni, ma è probabilmente una delle scelte più facili (e più compatibili con il browser) rispetto a tutto il resto che ho visto.

— Kent Fredric
fonte
3

È anche possibile utilizzare i caratteri WOFF - esempio qui

@font-face {
font-family: 'Plakat Fraktur';
src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff');
font-weight: bold;
font-style: normal;
 }
— Wilf
fonte
3

Basta semplicemente fornire il collegamento al carattere reale come questo e sarai a posto

<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat'   rel='stylesheet'>
<style>
body {
font-family: 'Montserrat';font-size: 22px;
}
</style>
</head>
<body>

<h1>Montserrat</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>


</body>
</html>
— Abhijeet Kumar
fonte
Una buona alternativa semplice. E sei sicuro di avere i diritti per usarlo. Vedi developers.google.com/fonts/docs/getting_started
— Tim Erickson
2

Typeface.js Modo JavaScript:

Con typeface.js è possibile incorporare caratteri personalizzati nelle pagine Web in modo da non dover eseguire il rendering di testo in immagini

Invece di creare immagini o utilizzare Flash solo per mostrare il testo grafico del tuo sito nel tipo di carattere che desideri, puoi utilizzare typeface.js e scrivere in chiaro HTML e CSS, proprio come se i tuoi visitatori avessero il carattere installato localmente.

http://typeface.neocracy.org/

— Bakkal
fonte
2

Se hai un file del tuo font, dovrai aggiungere altri formati di quel font per altri browser.

A questo scopo utilizzo un generatore di font come Fontsquirrel che fornisce tutti i formati di font e il suo CSS @ font-face, dovrai solo trascinarlo e rilasciarlo nel tuo file CSS.

— saadeez
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.