Bert Bos |
Lettertypes (Future CSS, Utrecht 2013)
Lettertypes
Module
- Selectie van lettertype:
font-family, font-style...
- Fonts met het document meesturen:
@font-face
- Varianten van lettervormen
- Parameters voor OpenType
Korte geschiedenis van @font-face
- 1998:
@font-face in CSS, gebaseerd op model van
PDF:
- Systeemfonts ← al in CSS1
- ← in CSS2, nu afgeraden
Synthese van fonts
(met dezelfde maten)
- Fonts insluiten in het document („font
embedding”)
- 1998-2007: Trage acceptatie (alleen IE)
- Weinig fonts met licentie voor vrij downloaden
- Microsoft's EOT-technologie compatibel met de meeste licenties, maar proprietair
Korte geschiedenis van @font-face
- 2008: Microsoft opent EOT,
maar andere browsers willen liever wat nieuws: ontwikkeling van
WOFF in W3C
- Nu: Font embedding (WOFF en/of OpenType)
in de meeste browsers
Syntax
@font-face {
font-family: My Gill Sans;
font-style: oblique;
font-weight: normal;
src: url(../GILLSAN2.eot) format("eot"),
url(../GILLSAN2.woff) format("woff")
}
/* + drie andere: normal, bold en bold oblique */
body {
font: 1em/1.3 Gill Sans, My Gill Sans, sans-serif
}
Font-licenties
Fonts vallen onder auteursrecht
Afhankelijk van de licentie mag je een font op een server zetten:
- in elk formaat (OpenType, WOFF, EOT, enz.)
- alleen in WOFF en EOT
- alleen na toestemming van de rechthebbende
(evt. met speciale voorwaarden)
Een vlag in de OpenType-file geeft de meestvoorkomende licentietypes aan
Font-licenties
Types licentie (vlaggen in OpenType):
- Installable – mag op server in elk
formaat
(bijv. fonts in public domain)
- Restricted – mag niet worden
verspreid
(neem contact op met eigenaar voor evt. voorwaarden)
- Preview & print – alleen WOFF
en EOT toegestaan
- Editable – alleen WOFF en EOT toegestaan
De magie van WOFF en EOT
Geen DRM, maar regels van conformiteit
(gedefinieerd in de
W3C-specificaties)
Auteur van document geeft aan
- In style-sheet welk font hij heeft gebruikt
- In het font (EOT) of op de server (WOFF) welke documenten dat font gebruiken
De UA (browser) volgt de link 1 en controleert link 2
Online-hulp
Web sites zoals Font
Squirrel bieden verzamelingen vrije fonts aan en helpen bij
het genereren van de bijbehorende @font-face
PDF is één file met daarin alles wat het document nodig heeft: afbeeldingen, tekst en fonts. ePUB is hetzelfde: één enkele file (een zip-file in dit geval) met alles erin. Maar op het Web geven we de voorkeur aan virtueel insluiten. Met een term die is verzonnen door Ted Nelson in de jaren '60 noemen we dat „transclusie:” een component van een document is zelf een document, met een eigen adres (URL) en kan dus hergebruikt en geupdate worden.
„Font embedding” werkt op die manier: een document verwijst naar een style-sheet en het style sheet verwijst naar een font-file. Alle drie zijn ze onafhankelijke documenten, maar de link geeft aan dat de link een transclusie-link is.
(Compressie, marktpositie, CORS)