Javascript Girl
  1. Javascript Girl
  3. Comment analyser le format abrégé de police CSS
Intereting Posts
Signification de Dollar Sign & Curly Braces contenant un bloc Javascript en dehors de HTML Script Tag Convertir la chaîne JavaScript pour être minuscule? La charge d'ajax devrait rester l'état de ma case à cocher si elle est cochée Comment faire pour que la boucle attende jusqu'à ce que l'appel Async soit réussi avant de continuer Force javascript à exécuter * avant * redessiner le navigateur (exemple jsFiddle) AngularJS avec Django – étiquettes de modèle en conflit Le problème Cross Cross Resource (CORS) IFrame onload JavaScript event JavaScript est-il simple? Sinon, comment puis-je obtenir un accès synchronisé aux données partagées? AngularJS – Comment interroger le DOM lorsque le rendu de la directive est terminé Télécharger partiellement un fichier avec Javascript Comment passer "this" à la fenêtre setInterval Comment ne pas actualiser une page de JavaScript? JS – Obtenez la largeur et la hauteur de l'image à partir du code base64 Comment désactiver le téléchargement vidéo / audio dans les pages Web?

Comment analyser le format abrégé de police CSS

Je dois analyser le format abrégé de police CSS dans les composants séparés (police-famille, taille de police, police-poids, …). Ce format abrégé est assez compliqué. Voici deux exemples: 

10px sans-serif bold italic small-caps 1em/1.5em verdana,sans-serif

Avant de commencer à écrire un analyseur pour cela, y at-il un analyseur déjà existant là-bas que je pourrais utiliser (de préférence écrit en JavaScript)?

Voici un "élément DOM temporaire et utilisant la fonction css () de jquery"):

http://jsfiddle.net/thirtydot/tpSsE/2/ 

 var $test = $('<span />'); $test.css('font', 'bold italic small-caps 1em/1.5em verdana,sans-serif'); alert($test.css('fontWeight')); alert($test.css('fontStyle')); alert($test.css('fontVariant')); alert($test.css('fontSize')); alert($test.css('lineHeight')); alert($test.css('fontFamily'));

Voici ma propre tentative humble d'une fonction d'analyseur de police que je viens de créer. Mais je ne suis pas sûr de savoir si cela fonctionne avec toutes les spécialités du format de la police à court terme. 

 function parseFont(font) { var fontFamily = null, fontSize = null, fontStyle = "normal", fontWeight = "normal", fontVariant = "normal", lineHeight = "normal"; var elements = font.split(/\s+/); outer: while (element = elements.shift()) { switch (element) { case "normal": break; case "italic": case "oblique": fontStyle = element; break; case "small-caps": fontVariant = element; break; case "bold": case "bolder": case "lighter": case "100": case "200": case "300": case "400": case "500": case "600": case "700": case "800": case "900": fontWeight = element; break; default: if (!fontSize) { var parts = element.split("/"); fontSize = parts[0]; if (parts.length > 1) lineHeight = parts[1]; break; } fontFamily = element; if (elements.length) fontFamily += " " + elements.join(" "); break outer; } } return { "fontStyle": fontStyle, "fontVariant": fontVariant, "fontWeight": fontWeight, "fontSize": fontSize, "lineHeight": lineHeight, "fontFamily": fontFamily } }

Les règles d'analyse sont décrites dans la spécification qui contient également un guide pour lire la langue utilisée pour exprimer les règles de valeur .

Version pure et gratuite de Javascript: 

 var parsedStyleForCSS = function(cssString){ var el = document.createElement("span"); el.setAttribute("style", cssString); return el.style; // CSSStyleDeclaration object }; var parsedStyle = parsedStyleForCSS("font: bold italic small-caps 1em/1.5em verdana,sans-serif"); console.log(parsedStyle["fontWeight"]); // bold console.log(parsedStyle["fontStyle"]); // italic console.log(parsedStyle["fontVariant"]); // small-caps console.log(parsedStyle["fontSize"]); // 1em console.log(parsedStyle["lineHeight"]); // 1.5em console.log(parsedStyle["fontFamily"]); // verdana, sans-serif

Si vous cherchez à faire quelque chose de similaire avec les feuilles de style complètes, voir cette réponse: Analyse de CSS dans JavaScript / jQuery