javascript中有没有办法获取浏览器可以显示的所有字体(或字体系列)的名称? (我想给用户一个包含所有可用字体列表的下拉菜单,并允许用户选择一种字体。)我不想提前硬编码这个列表或从服务器发送它。 (直觉上,浏览器似乎应该知道它有什么字体,并且应该以某种方式将其暴露给 javascript。)
原文由 mattsh 发布,翻译遵循 CC BY-SA 4.0 许可协议
javascript中有没有办法获取浏览器可以显示的所有字体(或字体系列)的名称? (我想给用户一个包含所有可用字体列表的下拉菜单,并允许用户选择一种字体。)我不想提前硬编码这个列表或从服务器发送它。 (直觉上,浏览器似乎应该知道它有什么字体,并且应该以某种方式将其暴露给 javascript。)
原文由 mattsh 发布,翻译遵循 CC BY-SA 4.0 许可协议
就在这里!我很高兴你问了这个问题,因为我现在也想使用它。
http://www.lalit.org/lab/javascript-css-font-detect
代码 来自 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;
};
概括
它是如何工作的?
此代码的工作原理很简单,即每个字符在不同字体中的显示方式不同。所以对于相同字体大小的相同字符串,不同的字体将采用不同的宽度和高度。
原文由 Marko 发布,翻译遵循 CC BY-SA 4.0 许可协议
13 回答13k 阅读
7 回答2.2k 阅读
3 回答1.3k 阅读✓ 已解决
3 回答973 阅读✓ 已解决
6 回答1.3k 阅读✓ 已解决
2 回答1.4k 阅读✓ 已解决
4 回答1.3k 阅读✓ 已解决
JavaScript 版本有点不稳定。它通过遍历已知字体和测试来获取字体。
最准确的方法(尽管必须使用专有插件)是 使用 Flash 。在这里您可以获得字体列表,而无需使用尺寸单独测试它们。
您将不得不决定是要以无法在某些设备(iDevices、没有 Flash 插件的浏览器等)上工作为代价获得准确的列表,还是 仅通过 JavaScript 提供更好支持的部分列表。