英文字母中哪个字母占用的像素最多？

Question

英文字母中哪个字母占用的像素最多？

csschar

221

我正在尝试根据句子中字符数量进行一些动态编程。哪个英文字母在屏幕上占用的像素最多？

- keruilin

17

最多的像素？最宽？最高？哪种字体？你能具体说明吗？ - Gregor Brandt

8

那不是取决于所使用的字体吗？ - Roberto Aloi

1

哪种字体？小写，大写？ - Rocket Ronnie

7

这要看字体，因为你要的是“占用最多像素”的那个。 - Gurzo

7

传统的排版智慧是用 M 或 W 来表示大写字母，用 m 表示小写字母。根据字体不同可能会有所差异，但在大多数情况下都能得到令人满意的效果。 - tripleee

显示剩余3条评论

15个回答

154

除了 Ned Batchelder 给出的实用回答外，因为我在这里想了解数字：

0000000000000000000000000000000000000000

1111111111111111111111111111111111111111

2222222222222222222222222222222222222222

3333333333333333333333333333333333333333

4444444444444444444444444444444444444444

5555555555555555555555555555555555555555

6666666666666666666666666666666666666666

7777777777777777777777777777777777777777

8888888888888888888888888888888888888888

9999999999999999999999999999999999999999

- Earl Jenkins

9

我怀疑这个信息，认为数字 '1' 应该比其他数字更窄。但在我检查的字体中，所有数字的宽度都相同。我想这是字体设计的选择。 - jfritz42

11

对于我来说（在Ubuntu中的Firefox中查看此帖），1比其他数字更窄，而其他数字则宽度相同。 - MestreLion

@MestreLion：您正在使用哪种字体？包括字体名称、大小以及任何修饰，例如加粗或斜体。 - Earl Jenkins

2

@LukeTaylor -- 为什么会这样啊！ font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 15px;哦，那个苹果总是试图与众不同一点.... - Earl Jenkins

2

这实际上取决于font-variant-numeric：比例数字允许不同的宽度，无论是在字形还是间距方面，而表格数字必须遵循类似于等宽字体的规则。 - Matthew Willcockson

显示剩余5条评论

29

那么，是否考虑一种程序化的解决方案呢？

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';

- N K

"M"和"W"具有相同数量的像素。由于大多数答案都说“W”，最好展示M和W是相同的并且胜出。顺便说一句，非常好的答案。 - Talespin_Kit

18

传统上，大写字母"M"是最宽的。

- ChrisW

31

因此，“em”作为一种度量单位的原因是什么？http://en.m.wikipedia.org/wiki/Em_(typography) - bta

@marc_s：JAnderton的回答似乎支持这个答案。 - Peter Mortensen

14

我认为字母W是最宽的。

- Tudor

7

这也取决于所使用的字体。我一两年前使用Processing和Helvetica做了这件事，结果以递增像素顺序排列为ILJTYFVCPAXUZKHSEDORGNBQMW。思路是在画布上使用你所查看的字体绘制文本，计算像素，然后使用HashMap或Dictionary排序。

当然，这可能与您的使用不直接相关，因为它计算的是像素面积而不仅是宽度。这可能有点过头了。

void setup() { 
 size(30,30);
 HashMap hm = new HashMap();
 fill(255);
 PFont font = loadFont("Helvetica-20.vlw");
 textFont(font,20);
 textAlign(CENTER);

 for (int i=65; i<91; i++) {
    background(0);
    text(char(i),width/2,height-(textDescent()+textAscent())/2); 
    loadPixels();
    int white=0;
    for (int k=0; k<pixels.length; k++) {
       white+=red(pixels[k]);
    }
    hm.put(char(i),white);
  }

  HashMap sorted = getSortedMap(hm);

  String asciiString = new String();

  for (Iterator<Map.Entry> i = sorted.entrySet().iterator(); i.hasNext();) { 
    Map.Entry me = (Map.Entry)i.next();
    asciiString += me.getKey();
  }

  println(asciiString); //the string in ascending pixel order

}

public HashMap getSortedMap(HashMap hmap) {
  HashMap map = new LinkedHashMap();
  List mapKeys = new ArrayList(hmap.keySet());
  List mapValues = new ArrayList(hmap.values());

  TreeSet sortedSet = new TreeSet(mapValues);
  Object[] sortedArray = sortedSet.toArray();
  int size = sortedArray.length;

  // a) Ascending sort

  for (int i=0; i<size; i++) {
    map.put(mapKeys.get(mapValues.indexOf(sortedArray[i])), sortedArray[i]);
  }
  return map;
}

- Kwok Pan Fung

5

在Chrome中使用Arial字体大小为30像素 - W获胜。

- Šime Vidas

5

根据您的平台，可能有一种方法可以从字符串或DrawText（）函数中获取“getWidth”，并以某种宽度属性进行操作。

我会制作一个简单的算法，利用所需的字体，然后运行整个字母表，并将其存储在一个小型配置文件中，或者在初始化时计算它，因为从A到Z的循环并不难。

- BerggreenDK

3

一种计算字体宽度的解决方案，类似于xxx发布的解决方案，由Alex Michael在他的博客上发布（有趣的是，这个链接让我来到了这里）。

摘要： - Helvetica字体中，前三个字母是：M（2493像素），W（2414像素）和B（1909像素）。 - 对于一组与他的Mac一起发货的字体，结果基本相同：M（2217.51±945.19），W（2139.06±945.29）和B（1841.38±685.26）。

原始帖子：http://alexmic.net/letter-pixel-count/ 代码：

# -*- coding: utf-8 -*-
from __future__ import division
import os
from collections import defaultdict
from math import sqrt
from PIL import Image, ImageDraw, ImageFont


# Make a lowercase + uppercase alphabet.
alphabet = 'abcdefghijklmnopqrstuvwxyz'
alphabet += ''.join(map(str.upper, alphabet))


def draw_letter(letter, font, save=True):
    img = Image.new('RGB', (100, 100), 'white')

    draw = ImageDraw.Draw(img)
    draw.text((0,0), letter, font=font, fill='#000000')

    if save:
        img.save("imgs/{}.png".format(letter), 'PNG')

    return img


def count_black_pixels(img):
    pixels = list(img.getdata())
    return len(filter(lambda rgb: sum(rgb) == 0, pixels))


def available_fonts():
    fontdir = '/Users/alex/Desktop/English'
    for root, dirs, filenames in os.walk(fontdir):
        for name in filenames:
            path = os.path.join(root, name)
            try:
                yield ImageFont.truetype(path, 100)
            except IOError:
                pass


def letter_statistics(counts):
    for letter, counts in sorted(counts.iteritems()):
        n = len(counts)
        mean = sum(counts) / n
        sd = sqrt(sum((x - mean) ** 2 for x in counts) / n)
        yield letter, mean, sd


def main():
    counts = defaultdict(list)

    for letter in alphabet:
        for font in available_fonts():
            img = draw_letter(letter, font, save=False)
            count = count_black_pixels(img)
            counts[letter].append(count)

        for letter, mean, sd in letter_statistics(counts):
            print u"{0}: {1:.2f} ± {2:.2f}".format(letter, mean, sd)


    if __name__ == '__main__':
        main()

- javatarz

3

我知道这里的被接受答案是W，W代表WIN。

然而，在这种情况下，W也代表宽度。该案例研究使用了一个简单的宽度测试来检查像素，但仅限于宽度，而不是总像素数。作为一个易于对比的例子，被接受的答案假设O和Q占用相同数量的像素，但它们只占用相同的空间。

因此，W占用最多的空间。但是，它是否与公认的像素一样有效？

让我们获取一些实证数据。我从以下B、M和W创建了imgur图像。然后分析了它们的像素计数(见下文)，以下是结果:

B:114像素

M:150像素

W: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>

- Travis J

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ned Batchelder · Accepted Answer

嗯，让我看看：

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

cccccccccccccccccccccccccccccccccccccccc

dddddddddddddddddddddddddddddddddddddddd

eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

ffffffffffffffffffffffffffffffffffffffff

gggggggggggggggggggggggggggggggggggggggg

hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh

iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii

jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj

kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk

llllllllllllllllllllllllllllllllllllllll

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn

oooooooooooooooooooooooooooooooooooooooo

pppppppppppppppppppppppppppppppppppppppp

qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq

rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr

ssssssssssssssssssssssssssssssssssssssss

tttttttttttttttttttttttttttttttttttttttt

uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu

vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv

wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB

CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC

DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD

EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE

FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF

GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG

HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH

IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII

JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ

KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK

LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL

MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM

NNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNN

OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO

PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP

QQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQ

RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR

SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS

TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT

UUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUU

这些内容似乎都是无序的列表，可能是用HTML中的```

这是一个愚蠢的实验，没有单一答案可以回答哪个字母最宽。它取决于字体。因此，您需要进行类似的实验来确定您的环境答案。但事实是，大多数字体遵循相同的惯例，大写字母W将是最宽的。

以下是使用此特定示例字体捕获的这些字符宽度以比例形式显示（W = 100）:

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