@font-face
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
@font-face {
font-family: " your FontName ";
src: url( /location/of/font/FontFileName.eot ); /* IE */
src: local(" real FontName "), url( /location/of/font/FontFileName.ttf ) format("truetype"); /* non-IE */
}
/* THEN use like you would any other font */
.yourFontName { font-family:" your FontName ", verdana, helvetica, sans-serif;
}
font-family: " your FontName ";
src: url( /location/of/font/FontFileName.eot ); /* IE */
src: local(" real FontName "), url( /location/of/font/FontFileName.ttf ) format("truetype"); /* non-IE */
}
/* THEN use like you would any other font */
.yourFontName { font-family:" your FontName ", verdana, helvetica, sans-serif;
}
2 vragen: is deze dan crossbrowser?
en wanneer ik bv <h1> gebruik, gaat er dat dan goed mee werken?
Ik zeg kijk eens naar Font Squirrel.
Als je een Javascript oplossing wil kan je naar Cufon kijken.
Als je die websites bezoekt vind je een oplossing voor jouw probleem ;-)
Niels
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
@font-face{
font-family: 'MyWebFont';
src: url('WebFont.eot');
src: url('WebFont.eot?#iefix') format('embedded-opentype'),
url('WebFont.woff') format('woff'),
url('WebFont.ttf') format('truetype'),
url('WebFont.svg#webfont') format('svg');
}
font-family: 'MyWebFont';
src: url('WebFont.eot');
src: url('WebFont.eot?#iefix') format('embedded-opentype'),
url('WebFont.woff') format('woff'),
url('WebFont.ttf') format('truetype'),
url('WebFont.svg#webfont') format('svg');
}
wat ik nu niet begrijp: het bestand WebFont.eot is niet aanwezig bij de bestanden. wel een bestand met diavlo_ii_37_webfont.eot. is dat het desbetreffende bestand? zo zit het ook met de overige bestanden, alleen de .svg kan ik niet vinden tussen de bestanden?
javascript is hier niet mijn oplossing.
Toevoeging op 08/05/2012 19:05:49:
aah ik moest even de aanroepen etc vervangen, de filenamen.
werkt deze code eigenlijk crossbrowser?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
@font-face {
font-family: 'My Font';
src: local('MyFont'); /* kijk eerst lokaal of het font aanwezig is, bespaart weer wat laadtijd als het zo is */
src: url('MyFont.ttf') format('truetype'),
url(...);
/* stel in dat het een normaal lettertype is */
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'My Font'
src: local('MyFont'); /* kijk eerst lokaal of het font aanwezig is, bespaart weer wat laadtijd als het zo is */
src: url('MyFontBold.ttf') format('truetype'),
url(...);
/* stel in dat het een bold lettertype is */
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'My Font'
src: local('MyFont'); /* kijk eerst lokaal of het font aanwezig is, bespaart weer wat laadtijd als het zo is */
src: url('MyFontItalic.ttf') format('truetype'),
url(...);
/* stel in dat het een italic lettertype is */
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'My Font'
src: local('MyFont'); /* kijk eerst lokaal of het font aanwezig is, bespaart weer wat laadtijd als het zo is */
src: url('MyFontBoldItalic.ttf') format('truetype'),
url(...);
/* stel in dat het een bold en italic lettertype is */
font-weight: bold;
font-style: italic;
}
font-family: 'My Font';
src: local('MyFont'); /* kijk eerst lokaal of het font aanwezig is, bespaart weer wat laadtijd als het zo is */
src: url('MyFont.ttf') format('truetype'),
url(...);
/* stel in dat het een normaal lettertype is */
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'My Font'
src: local('MyFont'); /* kijk eerst lokaal of het font aanwezig is, bespaart weer wat laadtijd als het zo is */
src: url('MyFontBold.ttf') format('truetype'),
url(...);
/* stel in dat het een bold lettertype is */
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'My Font'
src: local('MyFont'); /* kijk eerst lokaal of het font aanwezig is, bespaart weer wat laadtijd als het zo is */
src: url('MyFontItalic.ttf') format('truetype'),
url(...);
/* stel in dat het een italic lettertype is */
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'My Font'
src: local('MyFont'); /* kijk eerst lokaal of het font aanwezig is, bespaart weer wat laadtijd als het zo is */
src: url('MyFontBoldItalic.ttf') format('truetype'),
url(...);
/* stel in dat het een bold en italic lettertype is */
font-weight: bold;
font-style: italic;
}
En crossbrowser? Ja, deze code werkt in: IE4+ (!), FF3,5+, Opera10+, Safari3.1+, Chrome4+.
je stelt nu voor elke font apart in of die italic, bold, underlined, of net wat is. maar die kan ik toch gewoon ook ergens anders doen, waar ik font-family aanroep?
Als ik nu dit nu mijn code zou zijn:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<!doctype html>
<meta charset=utf-8>
<title>My Little Font-face Demo</title>
<!-- hierin staat alleen jou code -->
<link rel=stylesheet href=css/MyFont.css>
<style>
body {
font-family: 'My Font';
}
</style>
<p>Wat leuke tekst met een <strong>bold tekstje</strong>, <u>onderstreept</u> en <em>italic</em>.</p>
<meta charset=utf-8>
<title>My Little Font-face Demo</title>
<!-- hierin staat alleen jou code -->
<link rel=stylesheet href=css/MyFont.css>
<style>
body {
font-family: 'My Font';
}
</style>
<p>Wat leuke tekst met een <strong>bold tekstje</strong>, <u>onderstreept</u> en <em>italic</em>.</p>
Nu zul je mooi de normale tekst zien in de lettertype die je hebt ingeladen. En je zult zien dat de onderstreepte tekst ook onderstreept is (omdat dit niet een font eigenschap maar een CSS handeling is). De bold- en italic tekst is gewoon als normale tekst zichtbaar.
Waarom? Omdat bold en italic een speciaal lettertype zijn. Die behoor je dus ook apart in te laden. Nu kun je dit doen:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@font-face {
font-family: 'My Font Regular';
/* normaal font */
}
@font-face {
font-family: 'My Font Bold';
/* bold font */
}
@font-face {
font-family: 'My Font Italic';
/* italic font */
}
strong,b { font-family: 'My Font Bold'; }
em, i { font-family: 'My Font Italic'; }
font-family: 'My Font Regular';
/* normaal font */
}
@font-face {
font-family: 'My Font Bold';
/* bold font */
}
@font-face {
font-family: 'My Font Italic';
/* italic font */
}
strong,b { font-family: 'My Font Bold'; }
em, i { font-family: 'My Font Italic'; }
Maar je voelt wel aan dat dit niet handig is. Je moet nu telkens als je een italic font wilt gebruiken die speciale 'My Font Italic' inladen. En wat als je nou beslist om een default font te gaan gebruiken? Dan moet je al die font-family: 'My Font Italic'; weer veranderen in font-style: italic; totaal onpraktisch dus.
Daarom is er de oplossing die ik hierboven aangaf. In de @font-face sectie geef je alle 3 de font types (en als er meer zijn alle x aantal) dezelfde naam. Vervolgens geef je met de normale css properties aan wat de default stijl is van zo'n font (bijv. font-weight: bold; voor een bold font).
Nu werkt het bovenste voorbeeld van dit bericht gewoon perfect.