Ändern der Schriftgröße basierend auf einer bestimmten Schriftart durch Javascript

Ich verwende eine ‘rtl’ Schriftart (benannt als JNN) in der horizontalen Menüleiste, die bei 18px normal und lesbar ist, wo die alternativen verfügbaren ‘rtl’ Schriften (wie Tahoma & Arial Unicode MS) unter Windows zu groß bei 18px sind . Aufgrund dieser Unähnlichkeit in ‘font-width’, wenn ein Besucher meiner WordPress-Site keine JNN-Schriftart auf seinem Computer installiert hat, wird ihm die Menüleiste in Tahoma / ‘Arial Unicode MS’ angezeigt und diese Schriften stören daher die Menüleistenlänge aufgrund der hohen Schriftgröße.

Gibt es eine Lösung durch Javascript, um die “Schrift-Verfügbarkeit” am Ende des Benutzers zu überprüfen, und wenn gefunden, benutze “Font-Size-A” und wenn nicht, dann benutze “Font-Size-B”?

Jede Hilfe wird sehr geschätzt.

Solutions Collecting From Web of "Ändern der Schriftgröße basierend auf einer bestimmten Schriftart durch Javascript"

Nicht genau das, wonach Sie gefragt haben, aber Sie können sicherstellen, dass der Benutzer die gewünschte Schriftart über die Regel @ font-face css3 hat.

Laut caniuse.com können ungefähr 95% der globalen Benutzer diese css-Eigenschaft verwenden, also ist es ein guter Kompromiss.

Verschiedene Browser verwenden jedoch unterschiedliche Schriftformate. Daher müssen Sie http://www.fontsquirrel.com/fontface/generator verwenden , um alle benötigten fonts zu generieren. Auf der Website finden Sie außerdem einige zusätzliche Informationen zur Verwendung der fonts.

Paul Irish hat einen tollen Blog-Eintrag über font-face und wie man es hier richtig benutzt. (Gehe zu seinem Blog und suche nach Font-Face) Ich hätte den Link selbst gepostet, aber ich kann nicht mehr als einen Link posten, weil ich ein neuer Benutzer bin.

Hoffe das hilft!

Diese Lösung verwendet zwei Stylesheets: wpse-4508-default.css und wpse-4508-small.css . Wir laden immer den Standard und laden auch die kleine Version, wenn eine bestimmte Schriftart nicht existiert. Wir speichern das Ergebnis in einem Cookie, so dass das nächste Mal der Test und das zusätzliche Laden auf der Client-Seite nicht durchgeführt werden müssen, was zu einem flüssigeren Erlebnis führt. Der Code ist so konzipiert, dass er von Ihrem Themenverzeichnis ausgeführt wird, sodass Sie den PHP-Code zu Ihrer functions.php hinzufügen functions.php . Ich habe einige var_dump() und alert() hinzugefügt, damit Sie var_dump() verstehen, was var_dump() . Ich habe es nur in Safari unter Mac OS X getestet.

 < ?php add_action( 'wp_head', 'wpse4508_wp_head' ); function wpse4508_wp_head() { // Always display our normal stylesheet wp_enqueue_style( 'wpse4508_default', get_stylesheet_directory_uri() . '/wpse-4508-default.css' ); $urlSmallStylesheet = get_stylesheet_directory_uri() . '/wpse-4508-small.css'; if ( ! array_key_exists( 'wpse4508_hasfont', $_COOKIE ) ) { // We don't know anything, detect it var_dump( 'No cookie info, loading JS' ); wp_enqueue_script( 'wpse4508_detector', get_stylesheet_directory_uri() . '/wpse-4508-detector.js', array(), false, true ); // Send the style sheet URL to the front wp_localize_script( 'wpse4508_detector', 'WPSE4508_Detector', array( 'url' => $urlSmallStylesheet )); } elseif ( 'false' == $_COOKIE['wpse4508_hasfont'] ) { // We know we should load the small stylesheet var_dump( 'Cookie info, no font, extra stylesheet via PHP' ); wp_enqueue_style( 'wpse4508_small', $urlSmallStylesheet ); } } // A simple div to test this code add_action( 'wp_footer', 'wpse4508_wp_footer' ); function wpse4508_wp_footer() { echo '
WPSE 4508 test
'; }

Die Datei wpse-4508-default.css :

 .wpse4508_test { background-color: red; font-size: 20px; width: 100%; text-align: center; position: absolute; top: 0; } 

Die wpse-4508-small.css , mit den zusätzlichen Regeln. Ich denke nicht, !important ist !important , da sie nach dem vorherigen laden, versuchen Sie es selbst.

 .wpse4508_test { background-color: green !important; font-size: 10px !important; } 

Die Javascript-Datei, die die Schriftart erkennt und einen Cookie setzt.

 var Detector = function(){ var h = document.getElementsByTagName("BODY")[0]; var d = document.createElement("DIV"); var s = document.createElement("SPAN"); d.appendChild(s); d.style.fontFamily = "sans"; //font for the parent element DIV. s.style.fontFamily = "sans"; //serif font used as a comparator. s.style.fontSize = "72px"; //we test using 72px font size, we may use any size. I guess larger the better. s.innerHTML = "mmmmmmmmmmlil"; //we use m or w because these two characters take up the maximum width. And we use a L so that the same matching fonts can get separated h.appendChild(d); var defaultWidth = s.offsetWidth; //now we have the defaultWidth var defaultHeight = s.offsetHeight; //and the defaultHeight, we compare other fonts with these. h.removeChild(d); /* test * params: * font - name of the font you wish to detect * return: * f[0] - Input font name. * f[1] - Computed width. * f[2] - Computed height. * f[3] - Detected? (true/false). */ function debug(font) { h.appendChild(d); var f = []; f[0] = s.style.fontFamily = font; // Name of the font f[1] = s.offsetWidth; // Width f[2] = s.offsetHeight; // Height h.removeChild(d); font = font.toLowerCase(); if (font == "serif") { f[3] = true; // to set arial and sans-serif true } else { f[3] = (f[1] != defaultWidth || f[2] != defaultHeight); // Detected? } return f; } function test(font){ f = debug(font); return f[3]; } this.detailedTest = debug; this.test = test; } WPSE4508_Detector.loadStylesheetIfNeeded = function() { var hasFont = new Detector().test('Andalus'); alert( 'Testing for font: ' + hasFont ); document.cookie = 'wpse4508_hasfont=' + (hasFont ? 'true' : 'false'); // Maybe add expiry date? if (!hasFont) { alert( 'Loading stylesheet via JS' ); var elHead = document.getElementsByTagName('head')[0]; var elLink = document.createElement('link'); elLink.rel = 'stylesheet'; elLink.type = 'text/css'; elLink.href = WPSE4508_Detector.url; elHead.appendChild(elLink); } } WPSE4508_Detector.loadStylesheetIfNeeded(); 

F: Gibt es eine Lösung durch Javascript, um die “Schrift-Verfügbarkeit” am Ende des Benutzers zu überprüfen, und wenn gefunden, benutze “Font-Size-A” und wenn nicht, dann benutze “Font-Size-B”?

Ja da ist. Es heißt JavaScript / CSS Font Detector und es kann die Verfügbarkeit von Schriften prüfen.

Nachdem Sie überprüft haben, ob ein bestimmter Code vorhanden ist, können Sie HTML-Elementen, die ein vorkonfiguriertes Fallback-Styling bieten, eine class hinzufügen oder sie entfernen.