CSS: Zwei Schriften mit unterschiedlichen Größen

jeff1980 · 13. April 2011 07:14

Hallo,

heute stehe ich vor einem Problem, für das ich irgendwann schon mal eine Lösung gesehen habe - sie aber nicht mehr finde...

Bei einem Projekt werden zwei Mac-Schriften verwendet (Optima und Zapfino). Da diese Schriften unter Windows normalerweise ja nicht zur Verfügung stehen, möchte ich über @font-face zwei ähnliche Schriften einbetten. Das klappt auch schon ohne Probleme.

Allerdings sind diese Schriften (speziell der Ersatz für Zapfino) wesentlich kleiner als das Original. Ich habe irgendwo schon mal gesehen, wie man unterschiedlichen Schriften verschiedene Größen zuweisen kann.

Ich stelle mir das in etwa so vor:

Hier klicken, um den Code zum Kopieren zu markieren

p {
font-family: calibri, arial, sans-serif;
font-size: 1.2em, 1em, 1em;
}

Das funktioniert natürlich nicht, aber bei Calibri und Arial verhält es sich ja ähnlich. Calibri ist viel kleiner als Arial, aber viel schöner (und vor allem von Microsoft mit Hinblick aufs Web entwickelt).

Hat jemand eine Idee, wie ich das lösen könnte?

Danke.... smile
Jan

btw: Weiß jemand, ob ich evtl. die Mac-Schriften einbetten darf? Habe dazu nichts gefunden, kann es mir aber auch nicht vorstellen. Dann wäre das Problem natürlich behoben. Im Moment halte ich mich an (auch für das Web) freie Schriften von www.fontsquirrel.com.

Beitrag geändert von jeff1980 (13. April 2011 07:16)

Andynium · 13. April 2011 07:23

Hast du Google Fonts schon mal gescheckt?

http://www.google.com/webfonts

Cherry · 13. April 2011 07:35

Hallo,

meintest du 'font-size-adjust' zum Anpassen der Größen?
http://www.css4you.de/Schrifteigenschaf … djust.html

Wäre ne feine Sache, nur wurde das ja wieder aus css2.1 entfernt :-(

VG
Cherry

jeff1980 · 13. April 2011 07:38

Hi,

den Zapfino-Ersatz (Tangerine) gibt es dort auch. Habe es grad auch mal eingebunden. Es bleibt leider das Problem, das Tangerine wesentlich kleiner ist als Zapfino. Zur Größenanpassung habe ich dort leider nichts gefunden.

@cherry: Das habe ich auch gefunden - aber eben wegen der fehlenden Unterstützung wieder verworfen.

Kann es sein, dass es bei CSS 3 eine neue Möglichkeit gibt? Die könnte man dann ja evtl. mit nem passenden js-tool auch den älteren Browsern beibringen...

mike-r · 13. April 2011 13:17

Du könntest im @font-face die Schriftgrösse (und/oder letter-spacing) anpassen und im eigentlichen Dokument dann relative Grössen verwenden.
Ob und wie gut das funktioniert, weiss ich nicht, müsste man rumprobieren.

Beitrag geändert von mike-r (13. April 2011 13:18)

jeff1980 · 13. April 2011 14:20

Das mit font-size innerhalb von @font-face habe ich gerade mal ausprobiert. Leider funktioniert es mit keiner Größenangabe (px, pc, pt, in, mm...), d.h. die Größen werden einfach ignoriert.

Hier ist mal das, was ich bis jetzt - die Schriften betreffend - habe:

Hier klicken, um den Code zum Kopieren zu markieren

@font-face {
    font-family: 'TangerineRegular';
    src: url('[[root_url]]/uploads/fonts/Tangerine_Regular-webfont.eot');
    src: url('[[root_url]]/uploads/fonts/Tangerine_Regular-webfont.eot?#iefix') format('eot'),
         url('[[root_url]]/uploads/fonts/Tangerine_Regular-webfont.woff') format('woff'),
         url('[[root_url]]/uploads/fonts/Tangerine_Regular-webfont.ttf') format('truetype'),
         url('[[root_url]]/uploads/fonts/Tangerine_Regular-webfont.svg#webfonthaN3LTd2') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TendernessRegular';
    src: url('[[root_url]]/uploads/fonts/Tenderness-webfont.eot');
    src: url('[[root_url]]/uploads/fonts/Tenderness-webfont.eot?#iefix') format('eot'),
         url('[[root_url]]/uploads/fonts/Tenderness-webfont.woff') format('woff'),
         url('[[root_url]]/uploads/fonts/Tenderness-webfont.ttf') format('truetype'),
         url('[[root_url]]/uploads/fonts/Tenderness-webfont.svg#webfontnfSTEkO5') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: optima, 'TendernessRegular', arial, sans-serif;
    font-size: 62.5%;
    color: #000;
}

p {
    font-size: 1.2em;
    margin-bottom: 1.2em;
}

a {
    font-size: 1.2em;
    color: #3fa447;
}

h1 {
    font-size: 4em;
    font-weight: normal;
}

h1 .h1_green {
    color: #3fa447;
}

h1 .h1_font {
    font-family: zapfino, 'TangerineRegular';
}

Zur Not müssten wir halt in den sauren Apfel beißen, und die Schriften entweder kaufen - oder ganz auf die freien Schriften ausweichen.
Mal sehen, wie ich das dem Designer beibringen kann...

PS: Teste es im Moment übrigens nur im FF4. Aber wenn es da schon nicht geht, hats ja eh nicht viel Sinn.

mike-r · 13. April 2011 15:27

Ja auch grad mal getestet, da geht wohl nix.

Andynium · 13. April 2011 18:09

Na da helfen dir die M$ Webfonts auch nicht weiter

https://www.microsoft.com/typography/WEFT.mspx

Forum für CMS/made simple

#1 13. April 2011 07:14

CSS: Zwei Schriften mit unterschiedlichen Größen

#2 13. April 2011 07:23

Re: CSS: Zwei Schriften mit unterschiedlichen Größen

#3 13. April 2011 07:35

Re: CSS: Zwei Schriften mit unterschiedlichen Größen

#4 13. April 2011 07:38

Re: CSS: Zwei Schriften mit unterschiedlichen Größen

#5 13. April 2011 13:17

Re: CSS: Zwei Schriften mit unterschiedlichen Größen

#6 13. April 2011 14:20

Re: CSS: Zwei Schriften mit unterschiedlichen Größen

#7 13. April 2011 15:27

Re: CSS: Zwei Schriften mit unterschiedlichen Größen

#8 13. April 2011 18:09

Re: CSS: Zwei Schriften mit unterschiedlichen Größen

Fußzeile des Forums