Comment obtenir le réel de rendu de police lorsqu'elle n'est pas définie dans le CSS?

Comment puis-je obtenir le véritable visage de police et taille de police d'un élément lors de la CSS font-face et font-size propriétés ne sont pas définis?

Par exemple, le code JavaScript

object.style.fontFamily

ne retourne aucune valeur. C'est assez évident, en supposant que le CSS n'a pas appliqué un style de object n'importe où. Mais, bien sûr, une certaine police est utilisée pour rendre le texte, probablement le système de police ou le navigateur internet par défaut de la police.

Peut donc, par exemple, JavaScript obtenir ce rendu de police?

  • Java ou Flash peut le faire. JS - ne peut pas vous donner les noms de la police, mais vous pouvez essayer pour détecter la police par le déchiffrage de rendu du texte dans le canevas.
  • Ne sais pas si c'est pour vous, mais j'ai l'habitude d'utiliser WhatFont bookmarklet pour comprendre ce que la police utilisée sur une page, donc il y aura peut être quelques idées qui pourraient vous aider, si il détecte correctement les polices dont vous parlez...
  • Pourquoi voulez-vous faire? ..Je ne pas de deuxième deviner les questions de l'Empereur, mais, j'ai toujours été un rebelle, de toute façon.
  • Lol! 😉 Je veux déterminer le nombre de cols pour un textarea en fonction de la police définis pour le textarea, depuis cols est un attribut obligatoire pour les textarea en XHTML.
  • Les personnes qui ont besoin de cette information pour des raisons de débogage, plutôt que d'avoir à obtenir par programmation avec JavaScript, devrait découvrez stackoverflow.com/questions/884177/... à la place. Certains navigateurs outils de dev offrent cette information.
InformationsquelleAutor MC Emperor | 2011-09-16
  1. 30

    Je suggère à cette fonction:

    function css( element, property ) {
    return window.getComputedStyle( element, null ).getPropertyValue( property );
}

    Utilisation:

    css( object, 'font-size' ) //returns '16px' for instance

    Remarque: getComputedStyle ne fonctionne pas avec IE8.

    Démo Live: http://jsfiddle.net/4mxzE/

    • Merci, il semble que cela fonctionne. Le petit morceau de code :-). Je n'ai pas l'esprit le fait qu'il ne fonctionne pas avec IE8, parce que IE manque souvent les normes W3C et donc il faut beaucoup de temps pour faire la mise en page de votre site web compatible avec IE.
    • IE a l'comparables element.currentStyle à la place: quirksmode.org/dom/getstyles.html
    • Si vous utilisez jQuery, changement element à $(selector).get(index). Le .get() méthode renvoie l'élément du DOM(s) sélectionné par $(selector). Assurez-vous de définir index = 0 même si il n'y a qu'un seul élément sélectionné, depuis .get() sans params retournera un tableau.
    • J'utilise [0] pour accéder au premier élément d'un objet jquery. Pas besoin de méthode lorsque vous pouvez y accéder directement par l'index de tableau.
    • Bien que ce sera encore le retour de la police de la css spécifie, pas la police, le texte est effectivement rendu, s'ils varient. Je cherchais un moyen de voir si le navigateur a téléchargé et affiché ma police personnalisée.
    • Dans ce cas, ce serait différent que celui de jQuery? Parce que les deux de retour " (chaîne de caractères avec les guillemets) dans certaines circonstances.
    • Le jsfiddle fourni ne semble pas fonctionner comme prévu. Je suis sur le navigateur Chrome. Voici ma sauvé jsfiddle - jsfiddle.net/4mxzE/115. La police j'ai spécifié est PT-Sans-Reg qui il me montre dans l'alerte, mais le rendu de la police est toujours en Times New Roman
    • Je pense que, c'est parce que getComputedStyle renvoie "valeurs calculées" au lieu de "recours à des valeurs" (voir les exemples ici).
    • Quel est le but de null et getPropertyValue. Quelque chose ligne getComputedStyle(document.body)["font-size"]; semble également fonctionner, mais votre approche peut-être mieux.
    • Oui, cela devrait fonctionner. Je ne sais pas si le deuxième argument est obligatoire dans certains anciens navigateurs, mais sans doute pas plus un problème.

    InformationsquelleAutor Šime Vidas
  2. 32

    Il n'y a pas de norme, méthode fiable pour déterminer la police utilisée. Les réponses précédentes ici, le rapport du style fontFamily valeur de style, mais qui peut être une liste de noms de police et n'a pas d'identifier précisément les réelle de police rendus (ce qui était le réelle question posée ici).

    (Comme indiqué dans certains commentaires, il y a des façons de deviner à la police par l'inspection des signaux visuels, mais qui n'est pas susceptible d'être fiable à 100%.)

    • J'ai trouvé un moyen de vérifier pixel par pixel, vous pouvez dire, c'est un "repère visuel" mais qu'est ce qu'une police si ce n'est un ensemble de pixels?... et si parle comme un canard et nage comme un canard...
    • Eh bien, la plupart des contemporains de polices ne sont pas des collections de pixels, ils sont des graphiques vectoriels. Et ce n'est pas inutile coupant les cheveux en quatre! Ce que je veux en venir, c'est qu'il y aura des différences de rendu entre les navigateurs, par exemple, le crénage et les ligatures peuvent être pris en charge par différents moyens (ou pas du tout), et qui aura une influence sur les dimensions de votre texte rendu.
    • Je vois votre réponse ci-dessous maintenant, et de mon point de vue ci-dessus ne s'applique pas à elle. Approche intéressante 🙂
    • Chrome va maintenant vous dire quels sont les polices en cours de rendu (comme dans Salman Une réponse) - dans les Outils de développement, d'aller à l'aide de l'onglet, et en bas il y a une section pour le Rendu des Polices.
    InformationsquelleAutor danorton
  3. 24

    Vous pouvez trouver les informations sur le rendu de la police dans Chrome/Firefox Developer Tools. Essayez de l'inspection du paragraphe dans l'extrait de code suivant:

    CSS:

    p { font-family: sans-serif;  }

    HTML:

    <p>Some text and <span title="an emoji"></span></p>

    En Chrome Developer Tools (testé sur 55.0.2883.75 m 64-bit) vous obtenez les informations suivantes:

    Comment obtenir le réel de rendu de police lorsqu'elle n'est pas définie dans le CSS?

    Dans Firefox, Outils de développement (testé sur 47.0.2 avec about:config > devtools.fontinspector.enabled = true) vous obtenez les informations suivantes:

    Comment obtenir le réel de rendu de police lorsqu'elle n'est pas définie dans le CSS?

    • Qui n'a pas de ces polices a été rendu =( Si Consolas n'a pas été trouvé, Menlo sera utilisé. Comment voir que, même avec Devtools?
    • le panneau (rendu des polices de google Chrome, onglet Polices dans FF) montre exactement de police qui a été utilisé. Il est possible pour un navigateur pour utiliser une police qui n'est pas répertorié dans la famille de polices. Dans le chrome exemple, vous pouvez clairement voir que "Lucida Sans Unicode" n'est pas répertorié dans la famille de police.
    • Eh bien, merde, je suis évidemment à l'aveugle. Le Rendu des polices, le cadre est génial! Et de la nouvelle-ish, je pense, je ne l'ai jamais vu. Savez-vous si il existe un moyen d'obtenir cette info avec JS? Je suis à la recherche de la devtools code. Merci man! =)
    • Il détecte même la police si substituée par une coutume @font-face avec src: local(Arial)!! Sweeet. Exactement ce dont j'avais besoin.
    • Merde. La recherche se termine à this._agent.getPlatformFontsForNode() qui n'est pas exposée. Appels github.com/ChromiumWebApps/blink/blob/... plus tard, dans le cas où vous êtes intéressé.
    • Si vous avez encore besoin d'elle, j'ai fait ce violon jsfiddle.net/JulienCabanes/ubzrmmy5
    • C'est la police de deviner. Ce n'est pas précis pour les noms de polices manquantes et des parents différents. Ensemble <html>s'font-family "Foo" et le type "Bar". Il rend Arial (par défaut), mais affiche "Foo". Cependant utiles. Ont sur Github ou quelque chose quelque part?
    • Voici le dépôt Github. Les problèmes que tu mentionnes sont résolus dans cette version.
    • Firebug sur Firefox fait quelque chose de similaire, où, dans le CSS définition pour un seul élément, le rendu de la police est active et les autres sont grisées
    • Vous n'avez probablement pas besoin de plus mais ma réponse montre comment le faire sans "deviner" car il vérifie chaque pixel à la place.
    • Je suis en utilisant google Chrome Version 54.0.2840.99 m mais ne pas voir le réel de rendu des polices comme le montre l'image de cette réponse. Quelle version est-ce?
    • testé à nouveau sur la dernière version de Chrome.
    • Je les vois maintenant. Ne sais pas si elle avait eu à faire avec ma version du navigateur. Merci @Salman

    InformationsquelleAutor Salman A
  4. 7

    J'ai trouvé un moyen (pour tous les navigateurs qui supportent <canvas>), le contrôle pixel par pixel si le rendu des polices a changé

    function renderedfont(ele) {
var getDefaultFonts = function () {
var iframe = document.createElement('iframe');
var html = '<html><body>';
var fonts;
document.body.appendChild(iframe);
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(html);
var subele = iframe.contentWindow.document.createElement(ele.tagName);
iframe.contentWindow.document.body.appendChild(subele);
fonts = getComputedStyle(subele)['font-family'];
document.body.removeChild(iframe);
return fonts;
}
var fonts = getComputedStyle(ele)['font-family'] + ',' + getDefaultFonts();
var fontsArray = fonts.split(',');
var canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
var testString = "abcdefghijklmnopqrstuvwxyz!@#$%^&*()ñ";
var prevImageData;
document.body.appendChild(canvas);
canvas.width = 500;
canvas.height = 300;
fontsArray.unshift('"Font That Doesnt Exists ' + Math.random() + '"');
for (var i = 0; i < fontsArray.length; i++) {
var fontName = fontsArray[i].trim();
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.font = '16px ' + fontName + ', monospace';
ctx.fillText(testString, 10, 100);
var idata = ctx.getImageData(0, 0, canvas.width, canvas.height); 
var data = idata.data
if (prevImageData) {
for (var j = 0; j < data.length; j += 3) {
if (prevImageData[j + 3] !== data[j + 3]) {
document.body.removeChild(canvas);
return fontName;
}
}
}
prevImageData = data;
}
document.body.removeChild(canvas);
return 'monospace';
}

    Donc à utiliser que vous venez de faire: 

    renderedfont(document.body);
//Arial

    Si vous utilisez un autre dialecte (par exemple, en japonais), vous pouvez modifier la testString variable pour la plupart des caractères communs dans ce dialecte.

    • C'est une bonne méthode, mais ça ne fonctionne toujours pas, car il ne serait pas savoir quelles polices d'essayer. Vous pouvez nommer une police Foo, mais tout de même rendre Arial, ou d'une référence de type monospace, qui rend Consolas. Chrome le sait, mais n'expose pas cette info =( Les devtools ont un Rendu des polices dans la section Calculées, qui est toujours correct, mais il utilise ceux qui sont cachés méthodes.
    • Première partie: C'méthodes de rejets de faux polices de caractères, donc si vous utilisez "Foo", il renvoie le réel pour un rendu, pas de "Foo" parce que c'méthodes de contrôles contre les polices par défaut par la création d'une copie isolée du nœud . Secondes de la partie: c'est Vrai, il retourne "monospace" quand est rendu "Consolas" mais de le corriger, il serait assez facile, vous avez juste à essayer de rendre "Consolas" et de vérifier si son rendu la même chose que "monospace". Les conversions sont juste une poignée (Fantasy, monospace, serif) de sorte que son possible. Et vous pouvez envoyer l'image vers le serveur pour vérifier qu'il n'y à l'encontre de toutes les polices.
    InformationsquelleAutor Ivan Castellanos
  5. 1

    Un peu de retard ici, mais ayant eu à résoudre le même problème...
    Šime Vidas la réponse est fondamentalement correct, mais de nos jours, vous pouvez faire preuve de créativité, et vous avez votre réponse.

    Fondamentalement, définir vos propres font-face, qui vous sont sûr ne correspond à aucun des polices existantes.
    Ensuite, ajoutez votre police après chaque computedstyle de police, et de voir si c'est la police qui se rendait. Si c'est pas le cas, félicitations, vous avez trouvé le rendu de la police

    Ici est le violon:
    https://jsfiddle.net/obutjanw/

    c'est le code qui définit la fonction dont vous avez besoin:

        (function(win) {
var style = null;
function createClass(name,rules){
if (typeof(rules)!="string") {
rules = JSON.stringify(rules).trim();
}
if (rules.startsWith("{")&&rules.endsWith("}")) {
rules = rules.substring(1,rules.length-1);
}
if (style==null) {
style = document.createElement('style');
style.type = 'text/css';
var head = document.getElementsByTagName('head');
if (head.length=0) {
var h = document.createElement('head');
document.insertBefore(h,document.body);
head = [h];
}
head[0].appendChild(style);
}
var rule;
if(!(style.sheet||{}).insertRule) {
rule = (style.styleSheet || style.sheet).addRule(name, rules);
} else {
style.sheet.insertRule(name+"{"+rules+"}",0);
rule = style.sheet
}
return rule;
}
function removeNode(node) {
if (node.remove) {
node.remove();
} else {
var pn = node.parentElement;
if (pn!=null) {
pn.removeChild(node);
}
}
}
createClass("@font-face", "{ font-family: 'void';  src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPQAA0AAAAAJLwAAAN2AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GYACCehEICrcUtUcLgVYAATYCJAODGgQgBYQrB4IOGy8iyD4M2GTIPrT6WF2CYVmsrZSME0Lxo0HkLsnMe3J+bjz8/1jtvj/u6wnzjEfTZlY97lD30CyaNpNQaV4SibwX23xgzQx8YoKmJQvZq6ZBWjJtbams7UgryfyPub1/XCfUSbdKmihiPrNKphKi5QzxL7t7f4Ygsik2JcsCqWjBhCpFOWuA+r3/lb/f/ynl4AsvOYHFxycux78I1qIX+gd5kXU+ZsO7wLswbYM/aGDRxjV8TPCAshIIMC3BsAwDkAAb0NvIC+Bt1UII+PmLFgF/hd0tbtmBKvpAEsJFJIuEZDoXOdKdvlnrANSzuI5ODoqTBnPXWUMoMLdg3mfM5HgyMvzfCugCzEGQYQ45BQFX1ASmGBwDbTaYhJrjHt5r10f62D9QM6cHAk2AuaL8WWyod/QWEE4QLaFWFCqRyTS5fKGWdOtLt+d0B+sPBEPhSDQWTyRT6Uw2ly8US+VKtVZv8IIoyYqqQd9Ny3bcZqvd6fb6g+FoPJnO5ovlar3Z7vYA5ScZ7ex193Bz+4z/ClwC/AB8oXoA1Q/QBEggoUqTYA8V8QP3xWofHHUvrXZRqXfN8qbGV8YZV/BYWfkBegAgFnoLMY558+Pt8rg7Lt/z7D56vHHjeA/kHpUZZIyeL9n5vJD5V237BwsBgH8gRAhBCAmRRAYRurBwyYHg13/L7+pCvTFrmXM6isP3aQYoSiBYmswqCfwfekQgMH26vOBlp5nIt6nNIJs88OmzLcScJXAJBwUBOeW2FwjQk4KAkLULgaTgJAIZWZcRyMq6KUBOxX0B8rLeC1DT8waBuokUYKIpYQXQyFC0nUzq9pMZRReBLHKDzOlbk3lFr8maFR5HqdvkgxFXG6MrdRFjNCViJUaL5+QiVrjAwbN9F7h5QMLZB9QKuCbhOcOWi97AARc3ldBBDi8bFfJTmJ/1iItcwZOIMfIycmDvY6ScyfmvdqFTF5QimmrIbmrhJOdJlQqCBU9IMJG7EXVZ2rAZzfk/h3ThhdtKRD2rDSRULcKD5KXtU+4+qq9BUUlZRVVNXUOTnYOTi5sHjkCi0BgsjpePX0BQSFhEVExcQlJKWkZWTl5BUUlZRVVNXQNPIJLIFCqNwWSxOVxNLW0dXT19A0MjYxNTM3MLSytrG1s7ewffpMhE1htvffTO++5q7O2mciQwb+6tAgAAAA==) format('woff2'), url(data:application/font-woff;charset=utf-8;base64,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) format('woff'); }");
var tests = document.createElement("span");
tests.innerHTML = "0123";
tests.style.display = "inline-block";
tests.style.fontFamily = "void";
document.body.appendChild(tests);
setTimeout(function() {
removeNode(tests);
},0);
function getRenderedFontFamily(elm, computedstyle) {
var cs = (typeof(computedstyle) == 'undefined') ? win.getComputedStyle(elm) : computedstyle;
var fontF   = (cs.fontFamily        || elm.style['font-family'] || '').replace(/['"]*/g, '');
var tfontF = fontF.split(",");
var tests = document.createElement("span");
tests.innerHTML = "0123";
tests.style.display = "inline-block";
tests.style.fontFamily = "void";
elm.appendChild(tests);
var refcs = window.getComputedStyle(tests);
var refw = refcs.width;
var tested = {};
while (tfontF!=null) {
for (var i=0;i<tfontF.length;i++) {
if (tested[tfontF[i]]) continue;
tests.style.fontFamily = tfontF[i] + ", void";
if (refcs.width!=refw) {
removeNode(tests);
return tfontF[i].trim();
}
tested[tfontF[i]] = true;
}
if (elm.parentElement) {
elm = elm.parentElement;
var cs1 = win.getComputedStyle(elm);
fontF   = (cs1.fontFamily       || elm.style['font-family'] || '').replace(/['"]*/g, '');
tfontF = fontF.split(",");
} else {
tfontF = null;
}
}
removeNode(tests);
}
win.getRenderedFontFamily =  getRenderedFontFamily;
})(window);

    Note que vous devriez vraiment garder la partie ont été d'un nœud à l'aide de la police est ajouté sur la charge, car sinon, le navigateur peut être la fin du rendu de l'corect de police sur le premier appel à getRenderedFontFamily

    InformationsquelleAutor Pierre Lang