Dynamisch Schriftarten in Berichten (HTML-Seiten gedruckt werden)

Question

Ich habe eine Kopfzeile font-size:40px;, die perfekt mit rund 90% meiner Berichte passt, ist aber ein bisschen zu groß für die letzten 10%

Es ist einfach genug, um auf die Größenänderung Normal-Seiten, auf denen wir die @media only screen haben aber was @media print

In einer Traumwelt würde ich font-size:auto; tun, was bedeutet: machen die Schrift so groß wie möglich, ohne über die Grenze zu gehen oder die Linie etc .. brechen

Gibt es einen Weg, dies zu tun, neben vielen if (text.length){font=34} Linien?

Answer 1

Einige mögen es betrügen, aber Sie können diese Art von Sache mit jQuery nähern. Im Folgenden wird die CSS-Eigenschaft "font-size" für jedes Element mit der Klasse "dynamic-font-size" dynamisch angepasst. Unterelemente, die die Schriftgröße in % oder em festlegen, haben daher auch Schriftarten, die mit der Elementbreite skalieren.

function resizeFonts() { 
    $('.dynamic-font-size').each(function() { 
     var width = $(this).width(); 
     var fontSize = Math.floor(width/4); 
     $(this).css("font-size", fontSize); 
    }); 
} 

$(document).ready(resizeFonts) 
$(window).resize(resizeFonts)