134.3.84.225: /* Dynamic font-size mit JavaScript */

2022-09-03T11:16:45Z

Dynamic font-size mit JavaScript

134.3.84.225: Die Seite wurde neu angelegt: „== Links == https://css-tricks.com/fitting-text-to-a-container/ https://codepen.io/chriscoyier/pen/mKXbwB https://github.com/rikschennink/fitty == Only CSS…“

2022-09-03T11:15:44Z

Die Seite wurde neu angelegt: „== Links == https://css-tricks.com/fitting-text-to-a-container/ https://codepen.io/chriscoyier/pen/mKXbwB https://github.com/rikschennink/fitty == Only CSS…“

Neue Seite

== Links ==
https://css-tricks.com/fitting-text-to-a-container/
https://codepen.io/chriscoyier/pen/mKXbwB
https://github.com/rikschennink/fitty
== Only CSS ==

== Dynamic font-size mit JavaScript ==
Z.b. mit fitty.js - fitty zieht eine Schrift auf die zur verfügung stehende Breite des Parent Containers.

<syntaxhighlight lang="javascript">
async function fontsReady() {
let ready = await document.fonts.ready; // promice
console.log('fonts ready' + ready);
fitty('.fitty');
}

fontsReady();
</syntaxhighlight>

Oder mit Ausschluss älterer Browser:
<syntaxhighlight lang="javascript">
(function () {
// no promise support (<=IE11)
if (!('Promise' in window)) {
return;
}
async function fontsReady() {
let ready = await document.fonts.ready; // promice
console.log('fonts ready' + ready);
fitty('.fitty');
}

fontsReady();
})();
</syntaxhighlight>

Oder mit Fallback über FontFaceObserver (würde ich heute nicht mehr Anwenden für die paar veralteten Browser und wenn dann auf alle Fälle den FFO nicht über CDN laden.
Besser über CSS vernünftiges Styling, dass auch ohne JS ordentlich ausschaut.

<syntaxhighlight lang="html5">
<style>
/* Only set the custom font if it's loaded and ready */
.fonts-loaded .fit {
font-family: 'Oswald', serif;
}
</style>
<script>
(function () {
// no promise support (<=IE11)
if (!('Promise' in window)) {
return;
}

// called when all fonts loaded
function redrawFitty() {
document.documentElement.classList.add('fonts-loaded');
fitty.fitAll();
}

// CSS Font Loading API
function native() {
// load our custom Oswald font
var fontOswald = new FontFace('Oswald', 'url(assets/oswald.woff2)', {
style: 'normal',
weight: '400',
});
document.fonts.add(fontOswald);
fontOswald.load();

// if all fonts loaded redraw fitty
document.fonts.ready.then(redrawFitty);
}

// FontFaceObserver
function fallback() {
var style = document.createElement('style');
style.textContent =
'@font-face { font-family: Oswald; src: url(assets/oswald.woff2) format("woff2");}';
document.head.appendChild(style);

var s = document.createElement('script');
s.src =
'https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.0.13/fontfaceobserver.standalone.js';
s.onload = function () {
new FontFaceObserver('Oswald').load().then(redrawFitty);
};
document.body.appendChild(s);
}

// Does the current browser support the CSS Font Loading API?
if ('fonts' in document) {
native();
} else {
fallback();
}
})();
</script>
</syntaxhighlight>

@@ Zeile 18: / Zeile 18: @@
 </syntaxhighlight>
-Oder mit Ausschluss älterer Browser:
+Schöne Lösung für fitty. Alte Browser werden ohne Fallback ausgeschlossen. Das Basis CSS sollte also wenigstens ordentlich ausschauen.
 <syntaxhighlight lang="javascript">
 (function () {

Dynamische Schriftgröße - dynamic fontsize - Versionsgeschichte

134.3.84.225: /* Dynamic font-size mit JavaScript */

134.3.84.225: Die Seite wurde neu angelegt: „== Links == https://css-tricks.com/fitting-text-to-a-container/ https://codepen.io/chriscoyier/pen/mKXbwB https://github.com/rikschennink/fitty == Only CSS…“