In einer Webanwendung verbessert das Anbieten einer Dropdown-Liste verfügbarer Schriftarten für Benutzer die Benutzererfahrung, da sie diese anpassen können Aussehen des Textes. Für diese Anpassung ist es erforderlich, eine Liste der Schriftarten zu erhalten, die der Browser anzeigen kann.
Glücklicherweise gibt es eine intuitive Lösung für dieses Problem. JavaScript bietet eine einfache Möglichkeit, alle Schriftarten aufzulisten, auf die ein Browser Zugriff hat. Dies ist ein entscheidender Schritt, damit Benutzer ihre bevorzugte Schriftart auswählen und die Webseite nach ihren Wünschen anpassen können.
Ein talentierter JavaScript-Entwickler hat eine umfassende Lösung erstellt, mit der Entwickler verfügbare Schriftarten erkennen können Schriftarten in einem Browser. Diese Methode verwendet eine Technik zum Vergleichen der gerenderten Breite und Höhe bestimmter Zeichen. Durch Gegenprüfung der Abweichung von Standardschriftarten ermittelt das Skript genau die Verfügbarkeit einer bestimmten vom Benutzer angegebenen Schriftart.
Der Code für diese Lösung ist auf GitHub verfügbar.
/** * JavaScript code to detect available availability of a * particular font in a browser using JavaScript and CSS. * * Author : Lalit Patel * Website: http://www.lalit.org/lab/javascript-css-font-detect/ * License: Apache Software License 2.0 * http://www.apache.org/licenses/LICENSE-2.0 * Version: 0.15 (21 Sep 2009) * Changed comparision font to default from sans-default-default, * as in FF3.0 font of child element didn't fallback * to parent element if the font is missing. * Version: 0.2 (04 Mar 2012) * Comparing font against all the 3 generic font families ie, * 'monospace', 'sans-serif' and 'sans'. If it doesn't match all 3 * then that font is 100% not available in the system * Version: 0.3 (24 Mar 2012) * Replaced sans with serif in the list of baseFonts */ /** * Usage: d = new Detector(); * d.detect('font name'); */ var Detector = function() { // a font will be compared against all the three default fonts. // and if it doesn't match all 3 then that font is not available. var baseFonts = ['monospace', 'sans-serif', 'serif']; //we use m or w because these two characters take up the maximum width. // And we use a LLi so that the same matching fonts can get separated var testString = "mmmmmmmmmmlli"; //we test using 72px font size, we may use any size. I guess larger the better. var testSize = '72px'; var h = document.getElementsByTagName("body")[0]; // create a SPAN in the document to get the width of the text we use to test var s = document.createElement("span"); s.style.fontSize = testSize; s.innerHTML = testString; var defaultWidth = {}; var defaultHeight = {}; for (var index in baseFonts) { //get the default width for the three base fonts s.style.fontFamily = baseFonts[index]; h.appendChild(s); defaultWidth[baseFonts[index]] = s.offsetWidth; //width for the default font defaultHeight[baseFonts[index]] = s.offsetHeight; //height for the defualt font h.removeChild(s); } function detect(font) { var detected = false; for (var index in baseFonts) { s.style.fontFamily = font + ',' + baseFonts[index]; // name of the font along with the base font for fallback. h.appendChild(s); var matched = (s.offsetWidth != defaultWidth[baseFonts[index]] || s.offsetHeight != defaultHeight[baseFonts[index]]); h.removeChild(s); detected = detected || matched; } return detected; } this.detect = detect; };
Mit dieser Methode können Entwickler ganz einfach Benutzeroberflächen erstellen, die eine nahtlose Schriftartenanpassung ermöglichen. Indem Benutzern die Möglichkeit gegeben wird, ihre bevorzugten Schriftarten aus einer umfassenden Liste auszuwählen, verbessert sich das allgemeine Benutzererlebnis und die Zufriedenheit mit Webanwendungen.
Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von JavaScript programmgesteuert verfügbare Schriftarten in einem Webbrowser auflisten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!