我知道公认的答案是W, W代表胜利。

但是，在本例中，W也表示宽度。案例研究使用了一个简单的宽度测试来检查像素，但它只是宽度，而不是总像素数。作为一个简单的反例，公认的答案假设O和Q占用相同数量的像素，但它们只占用相同数量的空间。

因此，W占的空间最大。但是，这是所有的像素，它被吹捧吗?

让我们来看看一些经验数据。我从下面的B, M和w中创建了imgur图像，然后分析了它们的像素数(见下文)，结果如下:

B: 114像素

M: 150像素

女:157像素

以下是我如何将它们放入画布并分析图像中的原始像素数据。

var imgs = { B : "//i.imgur.com/YOuEPOn.png", M : "//i.imgur.com/Aev3ZKQ.png", W : "//i.imgur.com/xSUwE7w.png" }; window.onload = function(){ for(var key in imgs){(function(img,key){ var Out = document.querySelector("#"+key+"Out"); img.crossOrigin = "Anonymous"; img.src=imgs[key]; img.onload = function() { var canvas = document.querySelector('#'+key); (canvas.width = img.width,canvas.height = img.height); var context = canvas.getContext('2d'); context.drawImage(img, 0, 0); var data = context.getImageData(0, 0, img.width, img.height).data; Out.innerHTML = "Total Pixels: " + data.length/4 + "<br>"; var pixelObject = {}; for(var i = 0; i < data.length; i += 4){ var rgba = "rgba("+data[i]+","+data[i+1]+","+data[i+2]+","+data[i+3]+")"; pixelObject[rgba] = pixelObject[rgba] ? pixelObject[rgba]+1 : 1; } Out.innerHTML += "Total Whitespace: " + pixelObject["rgba(255,255,255,255)"] + "<br>"; Out.innerHTML += "Total Pixels In "+ key +": " + ((data.length/4)-pixelObject["rgba(255,255,255,255)"]) + "<br>"; }; })(new Image(),key)} }; <table> <tr> <td> <canvas id="B" width="100%" height="100%"></canvas> </td> <td id="BOut"> </td> </tr> <tr> <td> <canvas id="M" width="100%" height="100%"></canvas> </td> <td id="MOut"> </td> </tr> <tr> <td> <canvas id="W" width="100%" height="100%"></canvas> </td> <td id="WOut"> </td> </tr> </table>

或者如果你想要一个宽度的映射，包含不止上面描述的alpha(数字)字符(就像我在非浏览器环境中需要的那样)

const chars = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "!", "\"", "#", "$", "%", "'", "(", ")", "*", "+", ",", "-", ".", "/", ":", ";", "=", "?", "@", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "[", "\\", "]", "^", "_", "`", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "{", "|", "}", "~", " ", "&", ">", "<"] const test = document.createElement('div') test.id = "Test" document.body.appendChild(test) test.style.fontSize = 12 const result = {} chars.forEach(char => { let newStr = "" for (let i = 0; i < 10; i++) { if (char === " ") { newStr += "&nbsp;" } else { newStr += char } } test.innerHTML = newStr const width = (test.clientWidth) result[char] = width / 10 }) console.log('RESULT:', result) #Test { position: absolute; /* visibility: hidden; */ height: auto; width: auto; white-space: nowrap; /* Thanks to Herb Caudill comment */ }

嗯，让我想想:

啊

咔嚓咔嚓

cccccccccccccccccccccccccccccccccccccccc

DDDD

eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

ffffffffffffffffffffffffffffffffffffffff

gggggggggggggggggggggggggggggggggggggggg

hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh

iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii

jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj

kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk

唔��

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn

呜

购买力平价

qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq

rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr

ssssssssssssssssssssssssssssssssssssssss

啧��

uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu

vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv

wwwwww

xxxx

yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz

啊

BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB

CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC

DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD

EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE

FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF

GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG

HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH

IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII

JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ

KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK

LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL

MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM

NNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNN

啊

公私合营

QQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQ

RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR

SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS

TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT

UUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUU

VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV

www

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY

ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ

W获胜。

当然，这是一个愚蠢的经验实验。哪个字母最宽没有唯一的答案。这取决于字体。所以你必须做一个类似的经验实验来找出你所处环境的答案。但事实是，大多数字体遵循相同的惯例，大写W将是最宽的。

主旨与这些字符宽度的比率形式(W = 100)在这里捕获使用特定的示例字体:

https://gist.github.com/imaurer/d330e68e70180c985b380f25e195b90c

这取决于字体。例如，交叉0所占的空间要比普通0大得多。

但如果要猜的话，我会选X或B。

那么程序化的解决方案呢?

var capsIndex = 65; var smallIndex = 97 var div = document.createElement('div'); div.style.float = 'left'; document.body.appendChild(div); var highestWidth = 0; var elem; for(var i = capsIndex; i < capsIndex + 26; i++) { div.innerText = String.fromCharCode(i); var computedWidth = window.getComputedStyle(div, null).getPropertyValue("width"); if(highestWidth < parseFloat(computedWidth)) { highestWidth = parseFloat(computedWidth); elem = String.fromCharCode(i); } } for(var i = smallIndex; i < smallIndex + 26; i++) { div.innerText = String.fromCharCode(i); var computedWidth = window.getComputedStyle(div, null).getPropertyValue("width"); if(highestWidth < parseFloat(computedWidth)) { highestWidth = parseFloat(computedWidth); elem = String.fromCharCode(i); } } div.innerHTML = '<b>' + elem + '</b>' + ' won';

大写的“M”通常是最宽的。