La tipografia web es refereix a l'ús de tipus de lletra a la World Wide Web. Quan es va crear l'HTML per primera vegada, les cares i estils de tipus de lletra es controlaven exclusivament per la configuració de cada navegador web. No hi va haver cap mecanisme perquè les pà gines web individuals controlessin la visualització de tipus de lletra fins que Netscape va introduir l'element el 1995, que després es va estandarditzar en l'especificació HTML 3.2. No obstant això, el tipus de lletra especificat per l'element s'havia d'instal·lar a l'ordinador de l'usuari o s'utilitzaria un tipus de lletra de reserva, com ara el tipus de lletra predeterminat sans-serif o monoespai d'un navegador. La primera especificació de fulls d'estil en cascada es va publicar el 1996 i va proporcionar les mateixes capacitats. font
font
L'especificació CSS2 es va llançar el 1998 i va intentar millorar el procés de selecció de tipus de lletra afegint coincidència, sÃntesi i descà rrega de tipus de lletra. Aquestes tècniques no van obtenir molt ús, i es van eliminar en l'especificació CSS2.1. No obstant això, Internet Explorer va afegir suport per a la funció de descà rrega de tipus de lletra a la versió 4.0, llançada el 1997. [1] La descà rrega de fonts es va incloure més tard al mòdul de tipus de lletra CSS3, i des de llavors s'ha implementat a Safari 3.1, Opera 10 i Mozilla Firefox 3.5. Això ha augmentat posteriorment l'interès per la tipografia web, aixà com l'ús de la descà rrega de fonts.
Contingut
CSS1
En la primera especificació CSS,[2] els autors especificaen caracterÃstiques de tipus de lletra a través d'una sèrie de propietats:
font-family
font-style
font-variant
font-weight
font-size
Totes les fonts van ser identificades únicament pel seu nom. Més enllà de les propietats esmentades anteriorment, els dissenyadors no tenien manera d'estilitzar els tipus de lletra, i no hi havia cap mecanisme per seleccionar tipus de lletra no presents al sistema client.
Tipus de lletra segurs per a la web
Els tipus de lletra segurs a la web són tipus de lletra susceptibles d'estar presents en una à mplia gamma de sistemes informà tics, i utilitzats pels autors de contingut web per augmentar la probabilitat que el contingut es mostri en el tipus de lletra escollit. Si un visitant d'un lloc web no té el tipus de lletra especificat, el seu navegador intenta seleccionar una alternativa similar, basada en els tipus de lletra alternatius especificats per l'autor i les famÃlies genèriques o utilitza la substitució de tipus de lletra definida en el sistema operatiu del visitant.
Tipus de lletra principals de Microsoft per al web
Per assegurar-se que tots els usuaris web tenien un conjunt bà sic de tipus de lletra, Microsoft va iniciar la iniciativa Core fonts for the Web el 1996 (finalitzada el 2002). Les fonts publicades inclouen Arial, Courier New, Times New Roman, Comic Sans, Impact, Georgia, Trebuchet, Webdings i Verdana, sota un EULA que els feia distribuïbles lliurement, però també limitava alguns drets al seu ús. La seva alta taxa de penetració els ha convertit en un element bà sic per als dissenyadors web. No obstant això, la majoria de distribucions de Linux no inclouen aquests tipus de lletra per defecte.
CSS2 va intentar augmentar les eines disponibles per als desenvolupadors web afegint sÃntesi de tipus de lletra, coincidència de tipus de lletra millorada i la possibilitat de descarregar tipus de lletra remots. [3]
Algunes propietats de tipus de lletra CSS2 es van eliminar de CSS2.1 i més tard es van incloure a CSS3. [4][5]
Tipus de lletra de reserva
L'especificació CSS permet que diversos tipus de lletra apareguin com a tipus de lletra de reserva. [6] A CSS, la propietat accepta una llista de cares de tipus de lletra separades per comes per utilitzar, aixÃ: font-family
font-family: "Nimbus Sans L", Helvetica, Arial, sans-serif;
El primer tipus de lletra especificat és el tipus de lletra preferit. Si aquest tipus de lletra no està disponible, el navegador web intentarà utilitzar el tipus de lletra següent de la llista. Si no es troba cap dels tipus de lletra especificats, el navegador mostrarà el tipus de lletra per defecte. Aquest mateix procés també passa per carà cter si el navegador intenta mostrar un carà cter no present en el tipus de lletra especificat.
FamÃlies de tipus de lletra genèrics
Per donar als dissenyadors web un cert control sobre l'aparició de tipus de lletra a les seves pà gines web, fins i tot quan els tipus de lletra especificats no estan disponibles, l'especificació CSS permet l'ús de diverses famÃlies de tipus de lletra genèrics. Aquestes famÃlies estan dissenyades per dividir els tipus de lletra en diverses categories en funció del seu aspecte general. Normalment s'especifiquen com els últims d'una sèrie de tipus de lletra de reserva, com a últim recurs en el cas que no hi hagi cap de les fonts especificades per l'autor. Durant diversos anys, hi havia cinc famÃlies genèriques:[6]
- Tipus de lletra que no tenen marques decoratives, o serifs, a les seves lletres. Aquests tipus de lletra sovint es consideren més fà cils de llegir a les pantalles. [7]
- Tipus de lletra que tenen marques decoratives, o serifs, presents en els seus personatges. Aquests tipus de lletra s'utilitzen tradicionalment en llibres impresos.
- Tipus de lletra en què tots els carà cters són igual d'amples.
- Tipus que s'assemblen a l'escriptura cursiva. Aquestes fonts poden tenir un aspecte decoratiu, però poden ser difÃcils de llegir a mides petites, de manera que generalment s'utilitzen amb moderació.
- Tipus de lletra que poden contenir sÃmbols o altres propietats decoratives, però que encara representen el carà cter especificat.
Tipus de lletra CSS que funcionen esborrany 4 amb suport menor del navegador
[8] Sistema-ui
- Tipus de lletra predeterminats en un sistema determinat: l'objectiu d'aquesta opció és permetre que el contingut web s'integri amb l'aspecte i la sensació del sistema operatiu natiu.
ui-serif
- Tipus de lletra per defecte d'un sistema determinat en un estil serif
ui-sans-serif
- Tipus de lletra predeterminats d'un sistema determinat en un estil sense serif
ui-monospace
- Tipus de lletra per defecte d'un sistema determinat en un estil monoespai
ui-arrodonit
- Tipus de lletra per defecte d'un sistema determinat en un estil arrodonit
- Tipus de lletra que utilitzen emoji
- Tipus de lletra per a fórmules i expressions matemà tiques complexes.
- Tipografies xineses que es troben entre les formes serif Song i Cursive Kai. Aquest estil s'utilitza sovint per als documents governamentals.
Tipus de lletra web
Història
Una tècnica per referir-se i descarregar automà ticament tipus de lletra remots es va especificar per primera vegada a l'especificació CSS2, que va introduir la construcció. En aquell moment, l'obtenció de fitxers de tipus de lletra de la web era controvertida perquè els tipus de lletra destinats a ser utilitzats només per a determinades pà gines web també es podien descarregar i instal·lar incomplint la llicència de tipus de lletra. [9]@font-face
Microsoft va afegir per primera vegada suport per a tipus de lletra EOT descarregables a Internet Explorer 4 el 1997. Els autors havien d'utilitzar l'eina WEFT propietà ria per crear un fitxer de tipus de lletra subsetted per a cada pà gina. EOT va mostrar que els webfonts podien funcionar i el format va veure algun ús en sistemes d'escriptura no suportats per sistemes operatius comuns. No obstant això, el format mai va obtenir una acceptació generalitzada i finalment va ser rebutjat pel W3C. [10]
El 2006, Håkon Wium Lie va començar una campanya contra l'ús d'EOT i, més aviat, els navegadors web suporten formats de tipus de lletra d'ús comú. [11][12][13] El suport per als formats de tipus de lletra TrueType i OpenType d'ús comú s'ha implementat des de llavors a Safari 3.1, Opera 10, Mozilla Firefox 3.5 i Internet Explorer 9.
El 2010, el mètode de compressió WOFF per als tipus de lletra TrueType i OpenType va ser enviat al W3C per la Fundació Mozilla, Opera Software i Microsoft, i des de llavors els navegadors han afegit suport. [14][15][16]
Google Fonts va ser llançat el 2010 per servir webfonts sota llicències de codi obert. El 2016, més de 800 famÃlies webfont estan disponibles. [17]
Webfonts s'han convertit en una eina important per als dissenyadors web i a partir de 2016 la majoria dels llocs utilitzen webfonts. [18]
Formats de fitxer
Mitjançant l'ús d'una tècnica d'incrustació CSS especÃfica[19] és possible incrustar tipus de lletra de manera que funcionin amb IE4 +, Firefox 3.5+, Safari 3.1+, Opera 10+ i Chrome 4.0+. Això permet a la gran majoria d'usuaris de la web accedir a aquesta funcionalitat. Algunes foneries comercials s'oposen a la redistribució de les seves fonts. Per exemple, Hoefler & Frere-Jones diu que, mentre que "... amb entusiasme [suport] l'aparició d'una web més expressiva en la qual els dissenyadors poden utilitzar de manera segura i fiable fonts d'alta qualitat en lÃnia, l'actual lliurament de fonts usades es considera "distribució il·legal" per la foneria i no està permès. [20] En canvi, Hoefler & ofereix un sistema de lliurament de fonts propietari arrelat al núvol. Moltes altres foneries de tipus comercial aborden la redistribució dels seus tipus de lletra oferint una llicència especÃfica, coneguda com a llicència de tipus de lletra web, que permet l'ús del programari de tipus de lletra per mostrar contingut a la web, un ús normalment prohibit per les llicències bà siques d'escriptori. Naturalment, això no interfereix amb les fonts i foneries sota llicències lliures. [m 1]@font-face
@font-face
TrueDoc
TrueDoc, tot i que no és especÃficament una especificació webfont, va ser el primer està ndard per incrustar tipus de lletra. Va ser desenvolupat per la foneria tipus Bitstream el 1994, i es va donar suport nativament a Netscape Navigator 4, el 1996. A causa de les restriccions de llicència de codi obert, amb Netscape incapaç de llançar el codi font de Bitstream, el suport natiu per a la tecnologia va acabar quan es va llançar netscape Navigator 6. Hi havia disponible un connector ActiveX per afegir suport per a TrueDoc a Internet Explorer, però la tecnologia havia de competir amb els tipus de lletra Embedded OpenType de Microsoft, que havien suportat de forma nativa al seu navegador Internet Explorer des de la versió 4.0. [21] Un altre impediment va ser la manca d'eines de codi obert o gratuïtes per crear webfonts en format TrueDoc, mentre que Microsoft va posar a disposició una eina gratuïta d'incrustació web de tipus de lletra per crear webfonts en el seu format.
OpenType incrustat
Internet Explorer ha suportat la incrustació de tipus de lletra a través de l'està ndard opentype incrustat propietari des de la versió 4.0. Utilitza tècniques de gestió de drets digitals per ajudar a evitar que els tipus de lletra es copiïn i s'utilitzin sense llicència. S'ha formalitzat un subconjunt simplificat d'EOT sota el nom de CWT (Compatibility Web Type, anteriorment EOT-Lite)[22]
Grà fics vectorials escalables
La tipografia web s'aplica a SVG de dues maneres:
- Totes les versions de l'especificació SVG 1.1, inclòs el subconjunt SVGT, defineixen un mòdul de tipus de lletra que permet la creació de tipus de lletra dins d'un document SVG. Safari va introduir el suport per a moltes d'aquestes propietats en la versió 3. Opera va afegir suport preliminar a la versió 8.0, amb suport per a més propietats a la 9.0.
- L'especificació SVG permet que CSS s'apliqui als documents SVG de manera similar als documents HTML, i la regla es pot aplicar al text dels documents SVG. Opera va afegir suport per a això a la versió 10,[23] i WebKit, ja que la versió 325 també admet aquest mètode utilitzant només tipus de lletra SVG.
@font-face
Tipus de lletra grà fics vectorials escalables
Els tipus de lletra SVG eren un està ndard de tipus de lletra W3C que utilitzava grà fics SVG que es va convertir en un subconjunt de tipus de lletra OpenType. [24] Permetia tipus de lletra multicolor[25] o animats. [26] Va ser primer un subconjunt d'especificacions SVG 1.1[27] però ha estat obsolet[28] en l'especificació SVG 2.0. Els tipus de lletra SVG com a format independent són compatibles amb la majoria dels navegadors, a part d'IE i Firefox, i està obsoleta a Chrome (i Chromium). [29] Això ara està generalment obsolet; l'està ndard amb el que la majoria del proveïdor de navegadors va estar d'acord és el subconjunt de tipus de lletra SVG inclòs a OpenType (i després al superconjunt WOFF, vegeu més avall), anomenat SVGOpenTypeFonts. [30] Firefox ha suportat SVG OpenType des de Firefox 26.
TrueType/OpenType
L'enllaç als tipus de lletra TrueType (TTF) i OpenType (TTF/OTF) està ndard de la indústria és compatible amb Mozilla Firefox 3.5+, Opera 10+,[31] Safari 3.1+,[32] i Google Chrome 4.0+. [33] Internet Explorer 9+ només admet aquells tipus de lletra amb permisos d'incrustació definits com a instal·lables. [34]
Format de tipus de lletra obert web
El format de tipus de lletra obert web (WOFF) és essencialment OpenType o TrueType amb compressió i metadades addicionals. WOFF és compatible amb Mozilla Firefox 3.6+,[35] Google Chrome 5+,[36][37] Opera Presto,[38] i és compatible amb Internet Explorer 9 (des del 14 de març de 2011). [39] El suport està disponible a Mac OS X Lion's Safari des del llançament 5.1.
Tipus de lletra Unicode
Només dos tipus de lletra disponibles per defecte a la plataforma Windows, Microsoft Sans Serif i Lucida Sans Unicode, proporcionen un ampli repertori de carà cters Unicode. Un error a Verdana (i el maneig diferent de la mateixa per part de diversos agents d'usuari) dificulta la seva usabilitat on es desitgen combinar carà cters.
En plataformes de programari lliure i de codi obert com Linux, GNU Unifont i GNU FreeFont proporcionen una à mplia gamma de carà cters Unicode.
Alternatives
Un obstacle comú en el disseny web és el disseny de maquetes que inclouen tipus de lletra que no són segures per a la web. Hi ha diverses solucions per a situacions com aquesta. Una solució comuna és reemplaçar el text per un tipus de lletra similar amb seguretat web o utilitzar una sèrie de tipus de lletra alternatius d'aspecte similar.
Una altra tècnica és la substitució d'imatges. Aquesta prà ctica consisteix a superposar text amb una imatge que contingui el mateix text escrit al tipus de lletra desitjat. Això és bo per a propòsits estètics, però evita la selecció de text, augmenta l'ús d'ample de banda, és dolent per a l'optimització de motors de cerca i fa que el text sigui inaccessible per als usuaris amb discapacitats.
També és comú l'ús de solucions basades en Flash com sIFR. Això és similar a les tècniques de reemplaçament d'imatges, tot i que el text és seleccionable i es renderitza com a vector. No obstant això, aquest mètode requereix la presència d'un connector propietari en el sistema d'un client.
Una altra solució és utilitzar Javascript per substituir el text per VML (per a Internet Explorer) o SVG (per a tots els altres navegadors). [40]
Els serveis d'allotjament de tipus de lletra permeten als usuaris pagar una subscripció per allotjar tipus de lletra no segurs per a la web en lÃnia. La majoria dels serveis allotgen el tipus de lletra per a l'usuari i proporcionen la declaració CSS necessà ria. @font-face
Un exemple d'una configuració CSS: @font-face
@font-face {
font-family: 'Journal';
src: url('http://your-own.site/fonts/journal/journal.woff') format('woff'),
url('http://your-own.site/fonts/journal/journal.svg#Journal') format('svg'),
url('http://your-own.site/fonts/journal/journal.ttf') format('truetype'),
url('http://your-own.site/fonts/journal/journal.eot'),
url('http://your-own.site/fonts/journal/journal.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
Consideracions prà ctiques
Aquesta secció necessita una ampliació. Podeu ajudar-lo afegint-hi. (agost 2014)
|
A la prà ctica, importa no només quin navegador web està utilitzant l'audiència, sinó també com es configura el seu sistema operatiu. El 2010, el dissenyador de tipus i consultor Thomas Phinney (vicepresident de FontLab i anteriorment amb Adobe[41]) va escriure un procés pas a pas per trobar la millor solució de renderització, que, més o menys de broma, utilitza un gran nombre de declaracions de goto. [42] Un diagrama de flux més orientat visualment es va publicar el mateix any al fòrum Typophile per Miha Zajec. [43]
Vegeu també
- Substitució escalable inman flash
- Llista de RFC tal com s'esmenta a WOFF (esborrany de 2009-10-23):
Notes
- ^ Vegeu Tipografies de codi obert i llistes de tipografies Unicode de programari lliure per a aquests tipus de lletra.
Referències
- ^ Garaffa, Dave (2 de setembre de 1997). "Tipus de lletra incrustats al Microsoft IE4pr2". Internet.com. Arxivat de l'original el 8 de juliol de 1998.
- ^ Fulls d'estil en cascada, nivell 1, W3C, 1996-12-17
- ^ "Fonts", Fulls d'estil en cascada, especificació de nivell 2: CSS2, World Wide Web Consortium, 1998-05-12, consultat el 28-07-2009
- ^ CSS2.1 Canvis —C.2.97 CapÃtol 15 Fonts, World Wide Web Consortium, consultat el 30-01-2010
- ^ Mòdul CSS3: Web Fonts, World Wide Web Consortium, consultat el 30-01-2010
- ^ Jump up to:un b "Especificació CSS2", Fonts, World Wide Web Consortium
- ^ Poole, Àlex (2005-04-07). "Què són més llegibles: tipografies Serif o Sans Serif?". Arxivat de l'original el 22/07/2017. Consultat el 27-09-2017.
- ^ "Ui-serif, ui-sans-serif, ui-monospace i valors arrodonits per ui per a la famÃlia de tipus de lletra | Puc utilitzar... Taules de suport per HTML5, CSS3, etc.".
- ^ Hill, Bill (2008-07-21), Font Incrustant a la web, Microsoft
- ^ Comentari de l'equip del W3C
- ^ El monopoli oblidat de Microsoft
- ^ Tipus de lletra web: la vista des del món lliure
- ^ CSS @ Ten: La següent gran cosa
- ^ Sol·licitud d'enviament del format de fitxer WOFF 1.0 al W3C
- ^ Galineau, Sylvain (2010-04-23), Meet WOFF, El format de tipus de lletra web està ndard, Microsoft
- ^ Codi de referència de conversió WOFF, consultat el 8 de maig de 2016
- ^ "La nova base de dades de Google Fonts és el paradÃs del geek del disseny". Theverge.com. [Consulta: 24 agost 2016'.
- ^ Richard Fink (2016-09-06)Webfonts a la prada, Alist Apart
- ^ Kimler, Scott Thomas (2009-07-04), tipus de lletra xBrowser — Expandeix la paleta de tipus de lletra utilitzant CSS3, consultat el 2010-02-05
- ^ Wubben, Mark (27 de febrer de 2009). "Geek Meet: Tipografia Web i sIFR 3 - Diapositiva 15 i 16". SlideShare. [Consulta: 17 març 2010'.
- ^ Niederst, Jennifer (2001). Disseny web en poques paraules: una referència rà pida d'escriptori (2a ed.). Reilly. p. 36. Isbn 0-596-00196-7. [Consulta: 20 març 2016'.Â
Quin any es va desenvolupar truedoc?
- ^ Daggett, John (2009-07-31), format de fitxer EOT-Lite v.1.1, World Wide Web Consortium, consultat el 30-01-2010
- ^ Mills, Chris (2008-12-04), Opera Presto 2.2 i Opera 10 - una primera mirada, Opera Software, recuperat 2010-01-30
- ^ SVG en OpenType, W3C, consultat el 2014-09-2014
- ^ Tipografia de colors a la web: prepara't per a tipus de lletra multicolor, Pixel Ambacht, consultat el 2014-09-20
- ^ Exemple de Glif, persones. Mozilla, consultat el 20-09-2014
- ^ Fonts, W3C, consultat el 2014-09-2014
- ^ CapÃtol de tipus de lletra, W3C, consultat el 08-03-2018
- ^ Puc utilitzar tipus de lletra SVG, CanIuse, consultat el 2014-09-20
- ^ SVGOpenTypeFonts, Mozilla, consultat el 20-09-2014
- ^ Mills, Chris (2008-12-04), Opera Presto 2.2 i Opera 10 - una primera mirada, Opera Developer Community, recuperat 29-01-2010
- ^ Marsal, Katie (2008-02-07), Safari 3.1 d'Apple per donar suport a tipus de lletra web descarregables, més, AppleInsider, consultat el 2010-02-05
- ^ Irlandès, Paul (2010-01-25), Chrome i @font cara: Ja és aquÃ!
- ^ Galineau, Sylvain (2010-07-15), The CSS Corner: Better Web Typography for Better Design, Microsoft
- ^ Shapiro, Melissa (2009-10-20), Mozilla admet web open font format, Mozilla, recuperat 2010-02-05
- ^ Gilbertson, Scott (26-04-2010), Google Chrome per donar suport al format web de tipus de lletra obert, webmonkey
- ^ Error 38217 - [crom] Afegeix compatibilitat amb WOFF, WebKit
- ^ Suport per a especificacions web a Opera Presto 2.7, Opera
- ^ Galineau, Sylvain (2010-04-23), Meet WOFF, El format de tipus de lletra web està ndard, Microsoft
- ^ Quant a Cufon
- ^ "Adobe Fonts"
- ^ Thomas Phinney (13 d'octubre de 2010)Â Font rendering en navegadors web: una aventura de trobar la teva font
- ^ [1] citat per l'enllaç phinney Internet Archive
Enllaços externs
- Especificació de tipus de lletra CSS del W3C
- Typoscan és una eina de disseny que us ajuda a escanejar la tipografia de qualsevol lloc web en menys d'un segon.
- Fonts de Google per al lloc web
Â
Comentaris publicats
Afegeix-hi un comentari: