Kann ich die Schriftgröße relativ zur Seitengröße festlegen?

Lesezeit: 3 Minuten

Benutzeravatar von pistacchio
Pistazie

Gibt es eine Möglichkeit zu machen font-size bezogen auf die Größe der Seite? Die Anwendung von Prozent als Einheit bezieht sich auf die Standardschriftgröße (z. B. 90 % von 12 Pixel, nicht 90 % der Seite!). Dies unterscheidet sich vom Verhalten der meisten anderen Tags.

Gibt es eine Möglichkeit, die Seite auch mit Schriftarten “auf und ab zu skalieren”? Soll ich mich darauf verlassen em?

Danke

Benutzeravatar von zachleat
zachleat

Sehen Sie sich die neuen CSS-Einheiten vh und vw an. Die Browserunterstützung ist noch nicht so toll.

http://snook.ca/archives/html_and_css/vm-vh-units

Es ist kürzlich in WebKit gelandet:
https://bugs.webkit.org/show_bug.cgi?id=27160

In Browsern, die dies unterstützen, 1 vh ist 1 % (1/100) der Darstellungsfensterhöhe und 1 vw beträgt 1 % (1/100) der Ansichtsfensterbreite. Es gibt auch vmin und vmax Einheiten, die jeweils die kleinere der beiden und die größere der beiden darstellen.

  • Sie sollten klarstellen, dass dies noch nicht allgemein unterstützt wird und dass es in CSS3 enthalten ist. Und vielleicht mehr auf was die vh und vm statt eines nackten Links zu einem Blog

    – zufällig

    29. März 2012 um 16:11 Uhr

  • „Die Browserunterstützung ist noch nicht so toll.“ Außerdem ist das das Internet, oder? Warum sollte ich wiederholen, was bereits geschrieben wurde? Wir sollten gute Informationsquellen mit Traffic belohnen und nicht versuchen, sie wegzuschotten.

    – Zachleat

    1. April 2012 um 22:08 Uhr

  • Das ist ein guter Vorschlag, wenn Linkrot nie eine Sache war meta.stackexchange.com/questions/8231/…

    – zufällig

    1. April 2012 um 22:11 Uhr


  • Interessant zu lesen, danke fürs Teilen. Wenn Sie meine Antwort bearbeiten möchten (ist das hier?), können Sie dies gerne tun, auch bekannt als “Pull-Anfragen willkommen”.

    – Zachleat

    4. April 2012 um 21:05 Uhr

  • Cool, hier ist ein Beispiel, wie es geht: das ist ein Test

    – Thorsten Stärk

    5. Februar 2015 um 7:08 Uhr

Nein, Sie können die Schriftgröße nicht in Prozent relativ zur Seitengröße festlegen.

Einmessen em basiert auf der Größe relativ dazu, wie die Schriftart normalerweise in 16 Punkt gerendert würde.

Wenn Sie möchten, dass Ihre Seite nach oben und unten skaliert wird und eine gewisse Skalierung für sich selbst, die Felder und die Schriftart beibehält, dann setzen Sie sie in em wäre in Ordnung.

Diese Methode ermöglicht es, dass die Skalierung von Schriftarten und Feldern der Seite in einer relativen Größe zueinander wächst und hoffentlich nicht aus den Grenzen und Grenzen herausfällt.

  • Es sollte beachtet werden, dass es sich um die Standardschriftgröße des Browsers handelt, die 16 Punkte betragen kann oder nicht (obwohl dies die Standardeinstellung bei Desktop-Browsern ist).

    – Tate Johnson

    25. Juli 2009 um 9:47 Uhr

  • Das stimmt, 16pt für die Standardgröße in Browsern. Und Sie können wirklich nicht erraten, ob der Benutzer es größer oder kleiner eingestellt hat, was ein wenig störend sein könnte, wenn das CSS davon abhängig ist.

    – zufällig

    25. Juli 2009 um 9:53 Uhr

  • also sagte ich foo und erwartete, dass die Größe von “foo” mit dem Browserfenster skalieren würde. Das ist nicht passiert.

    – Thorsten Stärk

    5. Februar 2015 um 6:58 Uhr

  • musste eine App für extra große Bildschirme anpassen, du hast mir gerade das Leben gerettet <3

    – moolsbytheway

    23. September 2017 um 4:13 Uhr

Benutzeravatar von Ryan McGeary
Ryan McGeary

Probieren Sie ein jQuery-Plugin wie z FitText. Die Textgröße wird automatisch an die Breite des übergeordneten Elements angepasst.

Ein weiteres jQuery-Plugin mit dem gleichen Ziel ist BigText (Demo).

Hier ist ein kleines Skript, das ich genau dafür erstellt habe (verwenden Sie es als Fallback, wenn vw nicht unterstützt wird).
https://gist.github.com/2475269

Eine andere nicht ideale Antwort ist die Verwendung einer Reihe von CSS-Haltepunkten wie folgt:

h1 { font-size: 22px; color: orange; }
@media only screen and (max-width: 900px) {
  h1 { font-size: 20px; color: blue; }
}
@media only screen and (max-width: 800px) {
  h1 { font-size: 18px; color: green; }
}
@media only screen and (max-width: 700px) {
  h1 { font-size: 12px; color: red; }
}

http://jsfiddle.net/8RKhp/

Benutzeravatar von Ninjakannon
Ninjakannon

Meiner Meinung nach ist der Bereich der scheinbaren Pixeldichten, den der Betrachter einer Webseite sieht, jetzt riesig, von einem HTC One, das 12 Zoll vom Gesicht entfernt gehalten wird, wo es 5600 Pixel/Radiant gibt, bis hin zu vielleicht einem 50-Zoll-Plasmabildschirm mit 480p , was etwa 950 Pixel/Radiant bei 4 Fuß entspricht.

Oder anders ausgedrückt: Eine 20-Pixel-Schrift ist in Ihrem Sichtfeld auf diesem Plasmabildschirm fast 6-mal größer als das neueste Mobilteil.

Die Lösung, die ich mir ausgedacht habe, bestand darin, die Körperschriftgröße in absoluten Pixeln als Vielfaches von festzulegen window.screenWidth Beschränken Sie es jedoch auf ein Minimum und eine maximale Anzahl von Einheiten, und verwenden Sie danach ems für alle Schriftgrößen. Die korrekte Verwendung von Überschriften sollte bedeuten, dass die Zugänglichkeit in Ordnung ist.

Ich füge diese Funktion zur Seite hinzu (oder es ist JS), um die Größe festzulegen:

function setFontSize() {
    pagesized = window.innerWidth / 30; // Proportionate font size to page
    pagesized = Math.max(pagesized, 14); // Set size to be no less than 14 px
    pagesized = Math.min(pagesized, 30); // & No greater than 30 px
    document.body.style.fontSize = pagesized; // Set body default font size
}

Damit dies funktioniert, wird dem Body-Tag Folgendes hinzugefügt:

<body onresize="setFontSize()" onload="setFontSize()">

Sie verwenden dann einfach Ihr CSS (oder Ihre Inline-Formatierung), die alle auf %- oder em-Einheiten basieren, und die Dinge sollten innerhalb dieser Grenzen gut skalieren.

Oder Sie können in JQuery Folgendes tun:

$(window).resize(function() {
    pagesized = $(window).innerWidth() / 30; // Proportionate font size to page
    pagesized = Math.max(pagesized, 14); // Set size to be no less than 14 px
    pagesized = Math.min(pagesized, 30); // & No greater than 30 px
    $('body').css('font-size', pagesized); // Set body default font size
});

Benutzeravatar von NawaMan
NawaMan

Zumindest für Firefox, 1em kann verwendet werden, um die Schriftgröße in Bezug auf die Schriftgröße des übergeordneten Elements festzulegen. Wenn Sie also die Schriftgröße von body auf einen Wert setzen, der im Verhältnis zur Größe der Seite steht. Alle Schriftarten unter body, die ’em’ als Einheit verwenden, stehen in Relation zur Seite.

Dazu müssen Sie die Größe des Körpers in Relation zur Seite setzen wie height: 100% oder Breite, wenn Sie die Größe mit der Breite in Beziehung setzen möchten.

Dann müssen Sie die Körpergröße ständig mit der Schriftgröße synchronisieren. Dies kann mit ‘onResize’ erfolgen.

Näheres dazu im Folgenden Verknüpfung.

  • der link existiert seit dem 31.07.2012 nicht mehr

    – k3b

    31. Juli 2012 um 5:13 Uhr

1436910cookie-checkKann ich die Schriftgröße relativ zur Seitengröße festlegen?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy