Die Idee das dass Schriftarten Server seitig intrigiert werde ist schon etwas älter . Mit CSS3 und @font-face ist dies nun aber möglich, es kommt aber noch zu erheblichen Kompatibilitäts-Problemen. Abhilfe schafft hier die Google Font API.
- http://code.google.com/webfonts
zuerst lade ich eine Schriftart via CSS im header meiner Seite
(bsp. die Schriftart "Cantarell" )
- http://code.google.com/webfonts/family?family=Cantarell#code
<link href=' http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'>Nun kann man schon seinen CSS Code bearbeiten und die Font Intrigieren
h1 { font-family: 'Cantarell', arial, serif; }
Das wahr eigentlich auch schon alles sollte mit Goolge ohne Probleme laufen. Eine weitere Variante wäre der Google WebFont Loader der dies mit einem Java Script löst.
<html>
<head>
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Tangerine', 'Cantarell' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
<style type="text/css">
.wf-inactive p {
font-family: serif
}
.wf-active p {
font-family: 'Tangerine', serif
}
.wf-inactive h1 {
font-family: serif;
font-size: 16px
}
.wf-active h1 {
font-family: 'Cantarell', serif;
font-size: 16px
}
</style>
</head>
<body>
<h1>This is using Cantarell</h1>
<p>This is using Tangerine!</p>
</body>
</html>Nun kann man auch hier beginnen die Font via CSS zu laden. In diesem Fall bringt uns Google 2 classen mit wf-inactive and wf-active.<style type="text/css">
.wf-inactive p { // Show paragraphs in serif font until fonts have loaded.
font-family: serif
}
.wf-active p { // Show paragraphs in Tangerine when the fonts have loaded.
font-family: 'Tangerine', serif
}
.wf-inactive h1 { // Show heading in serif font until fonts have loaded.
font-family: serif;
font-size: 16px
}
.wf-active h1 { // Show heading in Cantarell when the fonts have loaded.
font-family: 'Cantarell', serif;
font-size: 16px
}
</style>
0 Kommentare:
Kommentar veröffentlichen