是否可以检测客户端是否支持特定的Unicode字符，或者是否将其呈现为缺少的字形框？
重要：支持尽可能多的浏览器
不重要：效率，速度或优雅
我能想到的唯一方法是使用画布，所以我想在开始走这条路之前我会问。
谢谢！
编辑：这不适用于公共网站;我只是想编译每个浏览器支持的字符列表。
答案 0 :(得分：9)
这更像是一个疯狂的想法，而不是一个真正的答案：
如果你能找到一个你知道的字符总是呈现为丢失的字形框，你可以使用与此javascript font detector相同的技术 - 在屏幕外渲染字符和缺少的字形框并比较它们的宽度。如果它们不同，那么您知道该字符不会呈现为缺少的字形框。当然，这对于固定宽度的字体根本不起作用，并且对于许多字符具有相同宽度的其他字体，它可能有很多固定的底片。
答案 1 :(得分：3)
您可以使用画布检查字符的显示方式是否与您不支持的已知字符相同。自it's guaranteed not to be a valid unicode character起，U+FFFF是比较角色的好选择。
因此，您将在一个画布上渲染一个U+FFFF字符，并在另一个画布上渲染要测试的字符。然后，您可以使用toDataURL方法通过比较它们的数据URL来比较这两个画布。如果画布相同，则测试字符与不支持的U+FFFF字符的渲染方式相同，这表示不支持该字符；如果画布不同，则测试字符与不支持的字符的渲染方式也不相同。支持。
以下代码可以做到这一点：
//The first argument is the character you want to test, and the second argument is the font you want to test it in.
//If the second argument is left out, it defaults to the font of the <body> element.
//The third argument isn't used under normal circumstances, it's just used internally to avoid infinite recursion.
function characterIsSupported(character, font = getComputedStyle(document.body).fontFamily, recursion = false){
//Create the canvases
let testCanvas = document.createElement("canvas");
let referenceCanvas = document.createElement("canvas");
testCanvas.width = referenceCanvas.width = testCanvas.height = referenceCanvas.height = 150;
//Render the characters
let testContext = testCanvas.getContext("2d");
let referenceContext = referenceCanvas.getContext("2d");
testContext.font = referenceContext.font = "100px " + font;
testContext.fillStyle = referenceContext.fillStyle = "black";
testContext.fillText(character, 0, 100);
referenceContext.fillText('\uffff', 0, 100);
//Firefox renders unsupported characters by placing their character code inside the rectangle making each unsupported character look different.
//As a workaround, in Firefox, we hide the inside of the character by placing a black rectangle on top of it.
//The rectangle we use to hide the inside has an offset of 10px so it can still see part of the character, reducing the risk of false positives.
//We check for Firefox and browers that behave similarly by checking if U+FFFE is supported, since U+FFFE is, just like U+FFFF, guaranteed not to be supported.
if(!recursion && characterIsSupported('\ufffe', font, true)){
testContext.fillStyle = referenceContext.fillStyle = "black";
testContext.fillRect(10, 10, 80, 80);
referenceContext.fillRect(10, 10, 80, 80);
}
//Check if the canvases are identical
return testCanvas.toDataURL() != referenceCanvas.toDataURL();
}
//Examples
console.log("a is supported: " + characterIsSupported('a')); //Returns true, 'a' should be supported in all browsers
console.log("\ufffe is supported: " + characterIsSupported('\ufffe')); //Returns false, U+FFFE is guaranteed to be unsupported just like U+FFFF
console.log("\u2b61 is supported: " + characterIsSupported('\u2b61')); //Results vary depending on the browser. At the time of writing this, this returns true in Chrome on Windows and false in Safari on iOS.
console.log("\uf8ff is supported: " + characterIsSupported('\uf8ff')); //The unicode Apple logo is only supported on Apple devices, so this should return true on Apple devices and false on non-Apple devices.
答案 2 :(得分：2)
不确定是否可以依赖它（浏览器可能会改变显示的不支持的字符），也不确定这是否已经优化（因为我不太了解理想的边界）这里测量），但如果审查，以下方法（在画布中绘制文本并将结果作为图像检查）可以提供比检查宽度更可靠和准确的检查。开头的所有代码都只是浏览器检测，我们必须使用它，因为无法进行特征检测。
(function () {
// http://www.quirksmode.org/js/detect.html
var BrowserDetect = {
init: function () {
this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
this.version = this.searchVersion(navigator.userAgent)
|| this.searchVersion(navigator.appVersion)
|| "an unknown version";
this.OS = this.searchString(this.dataOS) || "an unknown OS";
},
searchString: function (data) {
for (var i=0;i<data.length;i++) {
var dataString = data[i].string;
var dataProp = data[i].prop;
this.versionSearchString = data[i].versionSearch || data[i].identity;
if (dataString) {
if (dataString.indexOf(data[i].subString) != -1)
return data[i].identity;
}
else if (dataProp)
return data[i].identity;
}
},
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index == -1) return;
return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
},
dataBrowser: [
{
string: navigator.userAgent,
subString: "Chrome",
identity: "Chrome"
},
{ string: navigator.userAgent,
subString: "OmniWeb",
versionSearch: "OmniWeb/",
identity: "OmniWeb"
},
{
string: navigator.vendor,
subString: "Apple",
identity: "Safari",
versionSearch: "Version"
},
{
prop: window.opera,
identity: "Opera",
versionSearch: "Version"
},
{
string: navigator.vendor,
subString: "iCab",
identity: "iCab"
},
{
string: navigator.vendor,
subString: "KDE",
identity: "Konqueror"
},
{
string: navigator.userAgent,
subString: "Firefox",
identity: "Firefox"
},
{
string: navigator.vendor,
subString: "Camino",
identity: "Camino"
},
{ // for newer Netscapes (6+)
string: navigator.userAgent,
subString: "Netscape",
identity: "Netscape"
},
{
string: navigator.userAgent,
subString: "MSIE",
identity: "Explorer",
versionSearch: "MSIE"
},
{
string: navigator.userAgent,
subString: "Gecko",
identity: "Mozilla",
versionSearch: "rv"
},
{ // for older Netscapes (4-)
string: navigator.userAgent,
subString: "Mozilla",
identity: "Netscape",
versionSearch: "Mozilla"
}
],
dataOS : [
{
string: navigator.platform,
subString: "Win",
identity: "Windows"
},
{
string: navigator.platform,
subString: "Mac",
identity: "Mac"
},
{
string: navigator.userAgent,
subString: "iPhone",
identity: "iPhone/iPod"
},
{
string: navigator.platform,
subString: "Linux",
identity: "Linux"
}
]
};
BrowserDetect.init();
/**
* Checks whether a given character is supported in the specified font. If the
* font argument is not provided, it will default to sans-serif, the default
* of the canvas element
* @param {String} chr Character to check for support
* @param {String} [font] Font Defaults to sans-serif
* @returns {Boolean} Whether or not the character is visually distinct from characters that are not supported
*/
function characterInFont (chr, font) {
var data,
size = 10, // We use 10 to confine results (could do further?) and minimum required for 10px
x = 0,
y = size,
canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
// Necessary?
canvas.width = size;
canvas.height = size;
if (font) { // Default of canvas is 10px sans-serif
font = size + 'px ' + font; // Fix size so we can test consistently
/**
// Is there use to confining by this height?
var d = document.createElement("span");
d.font = font;
d.textContent = chr;
document.body.appendChild(d);
var emHeight = d.offsetHeight;
document.body.removeChild(d);
alert(emHeight); // 19 after page load on Firefox and Chrome regardless of canvas height
//*/
}
ctx.fillText(chr, x, y);
data = ctx.getImageData(0, 0, ctx.measureText(chr).width, canvas.height).data; // canvas.width
data = Array.prototype.slice.apply(data);
function compareDataToBox (data, box, filter) {
if (filter) { // We can stop making this conditional if we confirm the exact arrays will continue to work, or otherwise remove and rely on safer full arrays
data = data.filter(function (item) {
return item != 0;
});
}
return data.toString() !== box;
}
var missingCharBox;
switch (BrowserDetect.browser) {
case 'Firefox': // Draws nothing
missingCharBox = '';
break;
case 'Opera':
//missingCharBox = '0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,197,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,73,0,0,0,0,0,0,0,0,0,0,0,36,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,36,0,0,0,0,0,0,0,0,0,0,0,36,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,36,0,0,0,0,0,0,0,0,0,0,0,36,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,36,0,0,0,0,0,0,0,0,0,0,0,36,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,36,0,0,0,0,0,0,0,0,0,0,0,197,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,73,0,0,0,0';
missingCharBox = '197,255,255,255,255,73,36,36,36,36,36,36,36,36,197,255,255,255,255,73';
break;
case 'Chrome':
missingCharBox = '2,151,255,255,255,255,67,2,26,2,26,2,26,2,26,2,26,2,26,2,26,2,26,2,151,255,255,255,255,67';
break;
case 'Safari':
missingCharBox = '17,23,23,23,23,5,52,21,21,21,21,41,39,39,39,39,39,39,39,39,63,40,40,40,40,43';
break;
default:
throw 'characterInFont() not tested successfully for this browser';
}
return compareDataToBox(data, missingCharBox, true);
}
// EXPORTS
((typeof exports !== 'undefined') ? exports : this).characterInFont = characterInFont;
}());
var r1 = characterInFont('a', 'Arial'); // true
var r2 = characterInFont('\uFAAA', 'Arial'); // false
alert(r1);
alert(r2);
更新1
我尝试更新现代Firefox（尝试检查画布中预期的十六进制数字），并检查以确保与上面的代码不同，画布（和匹配它的模式）刚好足够大容纳每个context.measureText()最宽的字符（我测试的U + 0BCC，虽然可能依赖于字体，在我的情况下＆＃34; Arial Unicode MS＆＃34;）。但是，根据https://bugzilla.mozilla.org/show_bug.cgi?id=442133#c9，measureText当前错误地仅对未知字符的缩放作出响应。现在，如果只有一个可以模拟JavaScript画布中的缩放，以便影响这些测量（并且只影响那些测量）......
答案 3 :(得分：-2)
您始终可以使用charCodeAt（）方法评估每个字符。这将返回unicode字符值。根据您的操作，您可以将您要接受的范围限制为“有效”字符...如果您复制“框”中的字符，您可以在网络上使用字符翻译器查看相应的unicode值是。
这是我用Google搜索并找到的一个：enter link description here
答案 4 :(得分：-3)
如果您想最大化浏览器支持，您可能不希望依赖javascript来做任何事情。许多移动浏览器甚至都不支持它。
如果浏览器不支持字符集，那么后退是什么？用其他语言显示内容？也许链接一个按需切换语言的站点会更健壮。