liste toutes les polices que le navigateur d'un utilisateur peut afficher
Existe-t-il un moyen en javascript pour obtenir les noms de toutes les polices (ou familles de polices) que le navigateur peut afficher? (Je souhaite donner à l'utilisateur une liste déroulante avec une liste de toutes les polices disponibles et lui permettre de choisir une police.) serveur. (Intuitivement, il semble que le navigateur devrait savoir quelles polices il possède et cela devrait être exposé au javascript.)
La version JavaScript est un peu floconneuse. Il obtient les polices en itérant des polices connues et en les testant.
Le moyen le plus précis (bien que de devoir utiliser un plugin propriétaire) est de utiliser Flash . Ici, vous pouvez obtenir la liste des polices sans avoir à les tester individuellement à l'aide de dimensions.
Vous allez devoir décider d’avoir une liste exacte au prix de ne pas travailler sur certains appareils (iDevices, navigateurs sans plugin Flash, etc.), ou une liste partielle avec un meilleur support via JavaScript uniquement .
Oui il y a! Je suis ravi que vous ayez posé cette question, car je souhaite maintenant l'utiliser également.
+1 pour la question, et voici votre réponse :)
http://www.lalit.org/lab/javascript-css-font-detect
Code from http://www.lalit.org/wordpress/wp-content/uploads/2008/05/fontdetect.js?ver=0.3
/**
* 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;
};
Résumé
Comment ça marche?
Ce code fonctionne sur le principe simple selon lequel chaque caractère apparaît différemment dans différentes polices. Donc, différentes polices prendront différentes largeur et hauteur pour la même chaîne de caractères de la même taille.
<SCRIPT>
function getFonts()
{
var nFontLen = dlgHelper.fonts.count;
var rgFonts = new Array();
for ( var i = 1; i < nFontLen + 1; i++ )
rgFonts[i] = dlgHelper.fonts(i);
rgFonts.sort();
for ( var j = 0; j < nFontLen; j++ )
document.write( rgFonts[j] + "<BR>" );
}
</SCRIPT>
<BODY onload="getFonts()">
<OBJECT id=dlgHelper CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px">
</OBJECT>
Dans ma recherche de cela, j'ai aussi trouvé Font.js , qui ajoute un objet Font de la même manière que Image, il est donc possible de vérifier si une police est réellement prête à être utilisée. Fonctionne également sur les polices installées/système. L’inconvénient est IE9 + uniquement parce que Object.defineProperty est nécessaire (d’autres navigateurs l’ont également), mais si vous utilisez le Web moderne, cela semble être une option encore meilleure. (Je vais malheureusement devoir donner la réponse ci-dessus, votée et passée à autre chose pour le moment. :))
Allez à deviceinfo.me et cliquez sur le bouton de détection de police.
J'ai ajouté deux méthodes au détecteur Lalit Patel ci-dessus:
- addFont (family, stylesheetUrl, ruleString) -> détecte si la police 'family' existe, sinon ajoute une feuille de style chargeant la police en utilisant stylesheetUrl si elle est donnée ou sinon ruleString
- addFontsArr (arr) -> ajoute un tableau de polices
Avec cela, vous pouvez faire:
fonts = [ 'Arial', 'Arial Black', { family: 'Lato', stylesheetUrl: 'https://fonts.googleapis.com/css?family=Lato'}, 'Leelawadee UI']
(new FontDetector()).addFontsArr(fonts);
code:
/**
* 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');
*/
function FontDetector() {
this.detect = detect;
this.addFont = addFont;
this.addFontsArr = addFontsArr;
// 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;
}
function addFont(family, stylesheetUrl, ruleString) {
if (detect(family)) {
//console.log('using internal font '+family);
return true;
}
if (stylesheetUrl) {
console.log('added stylesheet '+stylesheetUrl);
var head = document.head, link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = stylesheetUrl;
head.appendChild(link);
return true;
}
if (ruleString) {
console.log('adding font rule:'+rule);
var newStyle = document.createElement('style');
newStyle.appendChild(document.createTextNode(rule));
document.head.appendChild(newStyle);
return true;
}
console.log('could not add font '+family);
}
function addFontsArr(arr) {
arr.forEach(a => typeof a==='string' ? addFont(a) : addFont(a.family, a.stylesheetUrl, a.ruleString));
}
};
Cela pourrait peut-être être fait d'une manière complètement différente, en utilisant une feuille de correspondance avec des images de police connues pour un caractère spécifique et en la comparant aux instantanés d'un élément de la toile sur lequel le même caractère est dessiné avec ce que le navigateur rapporte comme étant la même police. La comparaison peut être faite avec quelque chose comme ressemblance.js .
C'est plus lent, mais cela devrait aussi nous permettre de détecter quand le navigateur ment.