Come aggiungere un carattere non standard a un sito Web?
https://stackoverflow.com/questions/107936
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Esiste un modo per aggiungere alcuni caratteri personalizzati sul sito Web senza utilizzare immagini, Flash o alcuni altra grafica?
Ad esempio, stavo lavorando su alcuni siti Web per matrimoni e trovavo molti caratteri interessanti per quell'argomento, ma non riesco a trovare il modo giusto per aggiungere quel carattere sul server e come includerlo font con CSS in HTML? È possibile fare a meno della grafica?
Soluzione
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 usi TrueType- Fonts (TTF) o Web Open Font Format (WOFF).
Altri suggerimenti
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 su di esso ).
Ad esempio:
Nella sezione <head>:
<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 utilizza per il titolo di un articolo. ). Tuttavia, non ci sono così tanti font disponibili finora in Directory dei font di Google .
La strada da percorrere è usare la dichiarazione CSS @ font-face che consente agli autori di specificare 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:
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.
Solutions:
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 stanno spostandosi 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 gli ultimi browser
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 inserito qui è estratto dal seguente
Se per carattere non standard, intendi 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 font in un formato non standard (bitmap ecc.), non posso aiutarti.
Ho scoperto che il modo più semplice per avere caratteri non standard su un sito Web è usare sIFR
Comporta 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).
L'articolo Font-face in IE: Far funzionare i font Web dice che funziona con tutti e tre i principali browser.
Ecco un esempio su cui ho lavorato: http://brendanjerwin.com/test_font.html
Altre discussioni sono in Incorporamento dei caratteri .
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 da TrueType o OpenType sui loro siti Web) tramite i nuovi < canvas > ; elemento in tutti i browser più recenti tranne Internet & nbsp; Explorer e via VML in Internet nbsp; Explorer
.Il problema principale con entrambi (a partire da ora) è che la selezione del testo non funziona o almeno funziona in modo piuttosto imbarazzante.
Comunque, è molto bello per i titoli. Testo del corpo ... Non lo so.
Ed è sorprendentemente veloce.
Oppure puoi provare sIFR . So che usa Flash, ma solo se disponibile. Se Flash non è disponibile, visualizza il testo originale nel suo carattere originale (CSS).
Esiste un modo per aggiungere alcuni caratteri personalizzati sul sito Web senza usare ... Flash?
Certo, usa Silverlight .
La tecnica raccomandata dal W3C per fare ciò si chiama " embedding " ed è ben descritto dai tre articoli qui: Embedding Fonts . 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.
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 quella di utilizzare 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 aggiorni semplicemente il testo e non Devo andare in giro in Photoshop.
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 un Graphics.
Sembra che funzioni solo in Internet Explorer, ma una rapida ricerca su Google per " html incorpora i caratteri " rese http://www.spoono.com/html/tutorials/tutorial .php? id = 19
Se vuoi rimanere indipendente dalla piattaforma (e dovresti!) dovrai usare le immagini, o semplicemente usare un carattere standard.
Ho fatto un po 'di ricerche e ho scavato Sostituzione dinamica del testo (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.
È 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;
}
Basta semplicemente fornire il link 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>
Typeface.js Modo JavaScript:
Con typeface.js puoi incorporare personalizzato font nelle tue pagine web in modo da non farlo rendere il testo in immagini
Invece di creare immagini o utilizzare flash solo per mostrare la grafica del tuo sito testo nel carattere desiderato, è possibile utilizzare typeface.js e scrivere in HTML semplice e CSS, proprio come se avessero i tuoi visitatori il carattere installato localmente.
Il monotipo ha recentemente rilasciato molti dei loro caratteri insieme a un nuovo sistema per usarli sulle tue pagine web: http : //www.webfonts.fonts.com/
Vedi l'articolo 50 Utile Strumenti di progettazione per una bellissima tipografia Web per metodi alternativi.
Ho usato solo Cufon . L'ho trovato affidabile e molto facile da usare, quindi mi sono bloccato.
Se hai un file del tuo font, dovrai aggiungere altri formati di quel font per altri browser.
A questo scopo utilizzo un generatore di caratteri come Fontsquirrel fornisce tutti i formati dei caratteri < !> amp; il suo @ font-face CSS, dovrai solo trascinare & amp; rilasciarlo nel tuo file CSS.
Temo che la grafica sia l'unica opzione in questo caso.
