Ik geloof dat dat ook niet is wat hij bedoelde; web-safe fonts zijn de lettertypes waar je vanuit kan gaan dat 95% van de bezoekers deze heeft; deze zijn dan ook veilig om te gebruiken.
Wanneer je een lettertype gebruikt dat een bezoeker niet heeft, wordt deze óf vervangen door een ander lettertype in je 'font-stack' (het lijstje fonts dat je opgeeft in je .CSS), óf vervangen door een compleet ander lettertype van hetzelfde type. Soms ziet
de bezoeker daar niet veel van (denk aan Helvetica vervangen door Arial --
voor vormgevers is dat ondenkbaar), maar soms zorgt dit er ook voor dat het gebruik van een 'leuk' lettertype resulteert in een onleesbare pagina.
Momenteel heb je meerdere opties om lettertypes te gebruiken die de bezoeker niet geinstalleerd heeft staan op zijn/haar systeem. Let wel, elke mogelijkheid heeft zo z'n nadelen:
1)
Dynamic Text Replacement: het gebruik van een .PHP (of ander server-side) scriptje om een stuk tekst te vervangen door een afbeelding die de server rendert (zie bijvoorbeeld
het e-mail adres in je Tweakers profiel). Het lettertype kun je beveiligen, zodat het script deze kan gebruiken maar de bezoeker deze niet kan downloaden. Ook kun je elke tekst dynamisch laten vervangen, je hoeft
niets van te voren te maken, alleen het script en het lettertype online te zetten.
De nadelen hiervan zijn dat de tekst niet te selecteren is (en dus ook niet te kopiëren of te lezen door een screenreader) en dat het schalen ook niet ideaal gaat (pixels!).
2)
SVG Fonts: het gebruik van .SVG bestanden om tekst te vervangen door de 'mooie' versie. Theoretisch best netjes, helaas ondersteunen maar weinig browsers de volledige font-specificatie van .SVG en zul je dus alle tekst om moeten zetten in paden. Hierdoor is deze zeer lastig te wijzigen, en zul je van te voren alle .SVG afbeeldingen moeten maken met bijvoorbeeld
Inkscape of Illustrator.
Ook is deze tekst, zelfs wanneer je ze niet omzet in paden, dan
niet te kopiëren in sommige browsers, en ondersteunt Internet Explorer het in z'n geheel niet (wel via de Adobe SVG plugin, maar deze
is discontinued).
3)
SiFR: het gebruik van de Flash (.swf) plugin om delen tekst te vervangen door de Flash variant. Tegenwoordig kun de tekst hiervan gewoon mee selecteren én is het schaalbaar.
Nadelen zijn wel dat je zeer gelimiteerd bent welke (en de hoeveelheid) teksten die je kunt aanpassen: Na een stuk of 10-20 Flash filmpjes op een pagina houdt het bij een aantal bezoekers echt wel op; het geheugen en CPU gebruik schiet dan door het plafond heen. Headers zijn eigenlijk de enige mogelijkheid, en body tekst zul je niet in een 'mooi' lettertype kunnen zetten. Ook is het relatief lastig te stylen; dit kost even wat werk.
Daarnaast kun je voor rare usability bugs komen te staan, zoals soms niet kunnen scrollen wanneer je cursor over zo'n stukje tekst staat, het niet altijd goed deselecteren van de tekst wanneer je de tekst op een pagina deselecteerd etc.
Een groot voordeel is weer dat SiFR de enige van de bovenstaande mogelijkheden is die
Google goedkeurt. De rest wordt gezien als
cloaking en kan je website flink omlaag drukken in de zoekresultaten.
Zo zijn er nog wat meer, maar ze komen allemaal op dezelfde principes neer.
Wie het lettertype gewoon door de browser wilt laten renderen (wat de juiste optie is - zo is het ook bedoeld, je DOM blijft netjes, screenreaders hebben er geen problemen mee etc.), heeft tegenwoordig nog een andere optie: het gebruik van webfonts. Deze kun je opgeven in je .CSS, je zet het lettertype op je server en voilá, de browser download het lettertype en en geeft je pagina weer zoals de ontwerper het bedacht heeft.
Webfonts is dus de mogelijkheid om
elk lettertype te gebruiken op het web, zonder dat daar 'hacks' of plugins voor nodig zijn.
Daar zijn drie opties voor:
1) De oudste optie:
TrueDoc, ontwikkeld door BitStream. Dit werkte alleen in Netscape Navigator 4, maakte gebruik van proprietary code (en lettertypes!) van BitStream en is dus ook nooit aangeslagen. Kan me niet voorstellen dat iemand hier nog gebruik van maakt, maar voor de volledigheid vermeld ik deze er even bij. Niet te gebruiken dus.
2)
Webfonts, via de @font-face mogelijkheid van CSS3. Dit is het eerst geïmplementeerd in de Apple Safari browser. Deze mogelijkheid beloofd veel goeds: Je kunt je lettertype op je server zetten, je specificeert hem in de .CSS en voilá, het werkt.
Nadeel is wel dat iedereen het lettertype kan downloaden, en daar zijn de meeste lettertype-studio's niet zo blij mee, aangezien dit niet compatible is met hun licentie-schema's en EULA's; ze zijn veel te bang dat de piraterij van lettertypes zal toenemen. Ook is dit
nog niet helemaal geïmplementeerd (zie het kopje '@font-face') in de alternatieve browsers (ze zijn al wel een eind op weg), en in Internet Explorer werkt dit in z'n geheel niet; zij ondersteunen alleen de onderstaande optie (.EOT).
3)
Embedded OpenType (.EOT), ontwikkeld door Microsoft als antwoord op het online gebruiken TrueType/OpenType lettertypes. Dit is de optie die
lettertype-studio's prefereren (het grootste deel van de studio's hoopt dat webfonts een hype is en probeert het te negeren); het lettertype is door middel van DRM technieken gebonden aan de website, en niemand anders kan deze (theoretisch) gebruiken.
Hier komt veel gedoe bij kijken; hoewel er al sites zijn die
gratis .EOT bestanden beschikbaar stellen, zul je meestal je net gekochte lettertype dienen te converteren naar .EOT via een speciaal stuk software,
WEFT,dat alleen werkt op Windows. Hiermee wordt er een .EOT bestand gegenereerd van je TrueType/OpenType bestand, specifiek voor dat domein. Dit moet je opnieuw doen wanneer je website (via bijvoorbeeld de verplaatsing van een intern domein naar een extern domein) online gaat.
Let wel; ervaring leert ons ook dat DRM altijd wel te hacken is, en dan is het voordeel voor de lettertype-studio's ook weg. Het enige wat dan nog overblijft is een hoop gedoe. Ook wordt dit alleen ondersteunt door Internet Explorer, en dat is tegenwoordig
nog maar 45% van de markt (afhankelijk van de doelgroep van je website).
Al met al staat het eraan te komen! (hetzij in de kinderschoenen, dat wel).
[Reactie gewijzigd door DiSiLLUSiON op 24 juli 2024 02:38]
Woendag is er in de Google Chrome's Dev channel een nieuwe bètarelease vrijgegeven van versie 2.0 van Googles webbrowser. De nieuwe versie kan hier als webinstaller voor Windows XP en Windows Vista worden gedownload en neemt 500 kilobyte schijfruimte in beslag. Chrome opent elke tab in een eigen proces, die als desktopapplicatie kan worden gebruikt. Verder is de webbrowser voorzien van een eigen Javascript-engine. Nieuw in deze release is onder andere de mogelijkheid om van webfonts gebruik te maken. Verder is het mogelijk om de locatie waar Google Chrome zijn tijdelijke bestanden opslaat vanaf de command line te veranderen. Meer informatie over de veranderingen in deze versie kan in de release notes worden gevonden:
:fill(white):strip_exif()/i/2002189289.jpeg?f=thumbmedium)
/u/201305/Pig.png?f=community){kind=small}
/u/139890/crop5dcd831596e70_cropped.png?f=community){kind=small}
:strip_icc():strip_exif()/u/11824/crop5eb44c54f2bc5_cropped.jpeg?f=community){kind=small}
:strip_icc():strip_exif()/u/235705/crop6321a058be6ed_cropped.jpg?f=community){kind=small}
/u/145971/logotnet.png?f=community){kind=small}
:strip_icc():strip_exif()/u/249570/twitter-icon.jpeg?f=community){kind=icon}
:strip_icc():strip_exif()/u/124259/locutus.jpg?f=community){kind=small}
:strip_icc():strip_exif()/u/29688/caffeine-drip-lrg.jpg?f=community){kind=small}
:strip_icc():strip_exif()/u/12330/dnangel_70.jpg?f=community){kind=small}
:strip_icc():strip_exif()/u/53749/crop5fab13a7d9d14_cropped.jpeg?f=community){kind=small}
