Benutzerspezifische Skalierung von speziellen Schriftarten

Polyhistor

nicht mehr wegzudenken
Hallo,

ich würde gerne bei der Gestaltung einer WebSite eine bestimmt Schriftart verwenden, die wohl nicht bei jedem verfügbar ist. Da es sich dabei nur um einige Überschriften handelt, kann man diese ja mit Hilfe von CSS als (Hintergrund-)Bild mit einbinden.
Dabei traf ich auf ein Problem: Wird die Schriftgröße manuel am Browser angepasst, so bleibt die Grafik (logischerweise) immer gleich groß.
Nun habe ich mir darüber Gedanken gemacht, wie ich meine spezielle Schriftart auf der Website verwenden kann, so dass die Schriftgröße bei benutzerspezifischen Angaben mit angepasst wird.

Darum meine Frage:
Gibt es die Möglichkeit irgendwie mit CSS eine Grafik einzubinden, sie sich proportional zur Skalierung der Schriftgröße mitskaliert? (Es wäre vielleicht denkbar eine breiten Angabe für die Bilder in "em" mit anzugeben, aber ich bezweifel, dass das geht) Oder gibt es noch eine andere Möglichkeit ohne das der Benutzer dabei die spezielle Schriftart installieren muss?

Danke für die Hilfe :)
 
Du gibst in der css-Anweisung mehrere Schriftarten an... Als erstes deine gewünschte und als zweites vielleicht eine Ähnliche und als drittes eine der Standardschriften, die dir in dem Design am besten gefällt.
 
Du kannst die Breite der Bilder in em angeben, aber vergiss dabei bitte auch die Höhe nicht, nicht dass da noch was komisches rauskommt ;)

CSS ist in der Beziehung wahnsinnig flexibel, darin ist es sogar erlaubt die Einheiten zu mischen, aber empfehlenswert ist das nicht, da ein paar Browser Probleme damit haben.

Ein generelles Problem gibt es allerdings:
Ich kann in meinem Browser für jedes Tag (H1-H6, P, DIV, etc. pp.) eine andere default- bzw Minimal-Schriftgröße angeben, das kann Dein CSS natürlich nicht "wissen" und das Bild entsprechend anpassen, da die UserCSS erst nach den anderen ausgeführt werden. Unter anderem deswegen wäre der Vorschlag von ToniCE der bessere:

Wer die Schrift hat, könnte dann die Seite in der Schrift sehen, wer nicht, kann den Text dennoch lesen. Bei Bildern wäre das nicht der Fall, das Attribut desc bzw longdesc unterstützen nicht alle Browser und den Text komplett im alt oder title Attribut anzugeben kann je nach Länge des Textes (X)HTML semantischer Unsinn sein.

Falls es eine lizenzfrei verbreitbare Schrift ist, kannst Du sie ja auf der Seite zum d/l anbieten, dann kann sie jeder installieren, dem es wichtig ist, Deine Seite so zu sehen wie Du sie Dir vorstellst...
 
Danke für die Antworten.
Mein Problem ist es, das ich davon ausgehen kann, das so gut wie niemand diese Schrftart hat :) Darum ist die Möglichkeit alternative Schriftarten anzugeben eher eine Notfalllösung.

Was mich interessieren würde: Wenn ich nun ein h1-Tag habe, der zum Beispiel wie folgt aussieht:
<h1>Überschrift</h1>
und dieser soll komplett durch eine Grafik ausgetauscht werden, so gebe ich in der CSS-Datei an, das die Schrift ausgebeldet werden soll und stattdessen ein Hintergrundbild positioniert werden soll. Kann ich bei diesem Hintergrundbild immer noch eine em-Größenangabe verwenden? Oder muss ich das Bild als normales Bild im img-Tag einbinden?
 
HTML:
<h1 class="ausblend">
	<span>Hier einfach nur Text</span>
</h1>

h1.ausblend {
	width: 20em; height: 3em;
	background: url("bildchen.jpg") no-repeat;
	}
	h1.ausblend span {
		display: block;
		width: 0;
		height: 0;
		overflow: hidden;
	}
...könnte klappen (grad nicht getestet)

Ansonsten müsste ich mal suchen, ich hab's mal hinbekommen, war aber nicht ganz trivial und von hinten durch die Brust ins Auge....

Im schlimmsten Fall mittels Javascript, aber immer auf die Fallback Lösung "reiner Text" achten, falls jemand JS, CSS oder Bilder ausgeschaltet hat ;)

edit:
HTML:
<h1>Hier einfach nur Text</h1>
h1 {
	font-size: 200%;
	position: absolute;
	top: 20px;
	left: 200px;
	width: 30em;
	height: 2em;
	z-index: 2;
}
h1::before {
	content: "";
	background-color: transparent;
	background-image: url(bildchen.jpg);
	position: absolute;
	top: 0;
	left: 0;
	width: 30em;
	height: 2em;
	display: block;
	z-index: 3;
}

Funktioniert natürlich auch, hat aber den Nachteil, dass alle Browser, die beim H1 Element keinen generierten Inhalt beherrschen (IE), tierisch aufs Maul fallen....

edit2:
Error, Error, Error.

Mit Background klappts garnicht.... es müsste schon ein echtes Bild sein, was eingeblendet wird....
 
Zuletzt bearbeitet:
Oben