[CSS] @font-face: wel italic, niet small-caps?

[Repsaj_Nav]

Ik ben een beetje aan het stoeien met CSS3 en dan vooral @font-face.

Ik gebruik het Delicious-lettertype (dat volgens de licentie ingesloten mag worden) in de h1 en de h2. Ik heb het werkend voor de h2 (italic), maar krijg het niet werkend voor de h1 (small-caps).

Mijn code is als volgt:

Cascading Stylesheet:

@font-face {
    /* A font by Jos Buivenga (exljbris) -> www.exljbris.com */
    font-family: "Delicious";  
    src: url('./fonts/Delicious-Roman.eot'); /* IE */  
    src: local("Delicious"), url('./fonts/Delicious-Roman.ttf') format("truetype"); /* non-IE */  
}
@font-face {
    /* A font by Jos Buivenga (exljbris) -> www.exljbris.com */
    font-family: "Delicious";
    src: url('./fonts/Delicious-SmallCaps.eot');
    src: local("Delicious"), url('./fonts/Delicious-SmallCaps.ttf') format("truetype");
    font-variant: small-caps;
}
@font-face {
    /* A font by Jos Buivenga (exljbris) -> www.exljbris.com */
    font-family: "Delicious";
    src: url('./fonts/Delicious-Italic.eot');
    src: local("Delicious"), url('./fonts/Delicious-Italic.ttf') format("truetype");
    font-style: italic;
}

h1 {
    background: black;
    color: #eee;
    text-transform: lowercase;
    line-height: 75px;
    padding: 0 15px;
    font-family: Delicious, Courier, sans-serif;
    text-align: center;
    float: left;
    font-variant: small-caps;
    font-size: 50px;
}
h2 {
    padding: 10px 15px;
    background: #ff0096;
    font-family: Delicious, Tahoma, sans-serif;
    font-style: italic;
    color: white;
    display: inline-block;
    font-size: 36px;
    margin: 0 0 10px 0;
}

Op mijn PC heb ik het lettertype geïnstalleerd staan, en daar zie ik het dus goed:
Op mijn Mac, die het lettetype niet heeft, krijg ik een ander lettertype te zien:

Op beide platformen gebruik ik Chrome als browser, dus het lijkt me sterk dat het daar aan ligt. De links naar de .ttf is in orde. CSS3 is valid, HTML ook.

Wanneer ik de .ttf download, kan ik deze gewoon openen in Windows, dus deze lijkt ook in orde te zijn. Waar ligt het dan aan?

Alvast bedankt voor jullie hulp!
Oja, een live voorbeeld (WIP).

[Bosmonster]

edit:

Als je al je fonts gewoon een andere naam geeft? (B.v. Delicous-smallcaps) ipv werkt met font-variant etc?

Ik weet namelijk niet hoe de xbrowser ondersteuning is voor font-variant, maar kan me voorstellen dat dat bij zo'n experimentele feature niet optimaal is.

[ Voor 99% gewijzigd door Bosmonster op 17-02-2010 14:01 ]

[MueR]

Je overschrijft de definitie van de font-family Delicious constant. Als je de small caps variant nou eens "Delicious Smallcaps" noemt (en die font-style enzo mogen weg, luistert font-face niet naar vziw) zul je zien dat het wel werkt.

[Repsaj_Nav]

Dat heb ik ook al geprobeerd, maar dat had alleen tot gevolg dat het op mijn Windows-computer ook niet meer werkte (logisch).

@MueR: jouw oplossing werkt wel
Ik moest idd het een andere font-family noemen, en alles betreffende font-variant weghalen.

De letters staan nu wel iets anders dan wanneer ik "native" small-caps gebruik, maar dat valt wel op te lossen.

Bedankt!

[ Voor 50% gewijzigd door Repsaj_Nav op 17-02-2010 14:29 ]

[NMe]

Repsaj_Nav schreef op woensdag 17 februari 2010 @ 14:22:
Dat heb ik ook al geprobeerd, maar dat had alleen tot gevolg dat het op mijn Windows-computer ook niet meer werkte (logisch).

Hoe zag/ziet je CSS er daarbij uit?

[MueR]

Dan doe je iets verkeerd gok ik. Ik ben hier met een project bezig wat best veel gebruik maakt van font-face en ik heb geen problemen.

Dus

[ Voor 5% gewijzigd door MueR op 17-02-2010 14:32 ]

[Salandur]

volgens de definitie is font-variant geen onderdeel van @font-face. dus die moet je al schrappen. deze kan je beter opnemen in de css class waar die nodig is.

zie ook https://developer.mozilla.org/en/CSS/@font-face

[ Voor 15% gewijzigd door Salandur op 17-02-2010 14:32 ]

[Repsaj_Nav]

NMe schreef op woensdag 17 februari 2010 @ 14:24:
[...]

Hoe zag/ziet je CSS er daarbij uit?

Zie ook mijn edit (man wat zijn jullie snel hier )

Cascading Stylesheet:

@font-face {
    /* A font by Jos Buivenga (exljbris) -> www.exljbris.com */
    font-family: "SC";
    src: url('./fonts/Delicious-SmallCaps.eot');
    src: local("Delicious-SmallCaps"), url('./fonts/Delicious-SmallCaps.ttf') format("truetype");
}
h1 {
    font-family: SC;
    font-variant: small-caps;
}

(alleen relevante code overgehouden).
Dit werkte niet. Ik denk dus dat @font-family geen support heeft voor "fancy" dingen als font-variant.

Bedankt voor jullie hulp!

[MueR]

@font-face is dan ook alleen een definitie van het font. Font-variant etc zijn effecten (in de ruimste zin des woords) op een element. In een @font-face staat enkel waar het font te vinden is.

Hint: maak je @font-face dingen via o.a. http://www.fontsquirrel.com/fontface/generator

[Salandur]

Repsaj_Nav schreef op woensdag 17 februari 2010 @ 14:32:
[...]
Zie ook mijn edit (man wat zijn jullie snel hier )

Cascading Stylesheet:

@font-face {
    /* A font by Jos Buivenga (exljbris) -> www.exljbris.com */
    font-family: "SC";
    src: url('./fonts/Delicious-SmallCaps.eot');
    src: local("Delicious-SmallCaps"), url('./fonts/Delicious-SmallCaps.ttf') format("truetype");
}
h1 {
    font-family: SC;
    font-variant: small-caps;
}

(alleen relevante code overgehouden).
Dit werkte niet. Ik denk dus dat @font-family geen support heeft voor "fancy" dingen als font-variant.

Bedankt voor jullie hulp!

Ik zou er het volgende van maken:

Cascading Stylesheet:

@font-face {
    /* A font by Jos Buivenga (exljbris) -> www.exljbris.com */
    font-family: "SC";
    src: local("Delicious-SmallCaps"), url('./fonts/Delicious-SmallCaps.ttf');
}
h1 {
    font-family: SC;
    font-variant: small-caps;
}

Je hebt namelijk 2 keer een src gedefinieerd staan.
Je kan eventueel nog opnemen de font-style en font-weight, maar dat lijkt me niet relevant bij dit font.

[Repsaj_Nav]

Ah, dat is een handige!

Ik had gehoopt dat font-variant ook zou werken, aangezien font-style en font-weight dat ook doen.
Zie ook http://iliadraznin.com/20...ont-face-multiple-weights. Daar gebruiken ze verschillende lettertypen voor verschillende diktes.

Salandur schreef op woensdag 17 februari 2010 @ 14:34:
Ik zou er het volgende van maken:

Cascading Stylesheet:

*knip*

Je hebt namelijk 2 keer een src gedefinieerd staan.

De ene voor IE, de andere is voor niet-IE. IE ondersteunt geen ttf.

[ Voor 34% gewijzigd door Repsaj_Nav op 17-02-2010 14:38 . Reden: Eérst F5'en, en dan razendsnel een reactie typen de volgende keer :P ]