javascript - type - ¿Cómo obtener la fuente renderizada real cuando no está definida en CSS?
font type css (4)
Encontré una forma (para todos los navegadores que admitan <canvas> ), verificando píxel por píxel si la representación de la fuente ha cambiado
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'';
}
Entonces, para usar, simplemente hazlo:
renderedfont(document.body);
// Arial
Si está usando esto para otro dialecto (por ejemplo, japonés), puede cambiar la variable testString por los caracteres más comunes en ese dialecto.
¿Cómo obtengo la cara de la fuente real y el tamaño de la fuente de un elemento cuando las propiedades CSS de la font-face y font-size no están definidas?
Por ejemplo, el fragmento de JavaScript
object.style.fontFamily
no devuelve ningún valor Eso es bastante obvio, asumiendo que CSS no ha aplicado un estilo para object ninguna parte. Pero, por supuesto, cierta fuente se usa para representar el texto, probablemente la fuente del sistema o la fuente predeterminada del navegador web.
Entonces, ¿puede JavaScript obtener esa fuente renderizada?
No existe un método estándar y confiable para determinar la fuente real que se está utilizando. Las respuestas anteriores aquí reportarán el estilo de estilo fontFamily , pero puede ser una lista de nombres de fuentes y no identifica específicamente la fuente real procesada (que fue la pregunta real que se presentó aquí).
(Como se mencionó en algunos comentarios, hay formas de adivinar la fuente mediante la inspección de señales visuales, pero es probable que no sea 100% confiable).
Puede encontrar la información sobre la fuente renderizada en Herramientas para desarrolladores de Chrome / Firefox. Intente inspeccionar el párrafo en el siguiente fragmento de código:
p { font-family: sans-serif; }
<p>Some text and <span title="an emoji">😁</span></p>
En las herramientas para desarrolladores de Chrome (probadas en 55.0.2883.75 m de 64 bits) obtienes la siguiente información:
En Firefox Developer Tools (probado en 47.0.2 con about:config > devtools.fontinspector.enabled = true ) obtienes la siguiente información:
Sugiero esta función:
function css( element, property ) {
return window.getComputedStyle( element, null ).getPropertyValue( property );
}
Uso:
css( object, ''font-size'' ) // returns ''16px'' for instance
Nota: getComputedStyle no funciona en IE8.
Demostración en vivo: http://jsfiddle.net/4mxzE/