如何在HTML中使用等宽字体显示特殊的Unicode字符并保留字符宽度 [英] How to display special unicode characters using monospace font in HTML with preserved character width

问题描述

我使用 pre 元素来显示一些包含特殊Unicode字符的文本（⚡⚑▶◀⁋）。
我注意到，浏览器呈现这些特殊字符比普通的更宽，占据更多的空间水平。

这里可以很容易地看到： https：// gist .github.com / 968b5c22cce14909cf27
这两行都有20个字符，但注意到第一个字符的显示时间较长（屏幕像素）。

有没有办法（CSS）强制pre元素（或应用等宽字体的其他元素）具有真正固定的字符宽度？

我检查了Chrome和Firefox，他们都扩大宽度特殊字符。

解决方案

原因在于<$ c $中列出的第一个字体缺少一些字符正在应用c> font-family 声明。因此，他们将在系统中显示一些其他的字体，或者显示一些不可表示的字符的指示符。

例如，第一个字符出现在少数仅限于字体，请参阅
http：//www.fileformat。 info / info / unicode / char / 26a1 / fontsupport.htm
（不包括所有字体，但是大多数人可能在电脑上使用的字体）。

即使使用的其他字体是等宽字体，字符的宽度也可能不同。例如， Everson Mono 的宽度稍小于 DejaVu Sans Mono 。因为等宽字体意味着字体中的所有字符都具有相同的宽度。

所以你需要使用一个字体所有你需要的角色。对于这个字符集合，上面提到的两种字体可能是唯一公开发布的等宽字体，它们全部包含它们。那么，有 unifont ，但它是一个非常粗糙的设计的位图字体;它可能看起来容忍在12pt大小或稍大。

I'm using pre element to display some text including special unicode characters (⚡ ⚑ ▶ ◀ ⁋). I noticed that browsers render these special characters wider than regular ones, occupying more space horizontally.

This can be easily seen here: https://gist.github.com/968b5c22cce14909cf27 Both lines have 20 characters but notice that first one is longer (screen pixels).

Is there a way (CSS) to force pre elements (or other element with monospace font applied) to have really fixed character width?

I checked on Chrome and Firefox and they both expand the width of special characters.

解决方案

The reason is that some of the characters are missing from the first font listed in the font-family declaration being applied. They will thus be displayed some other font(s) in the system, or some indicator of unrepresentable character is shown.

For example, the first character is present in a handful of fonts only, see http://www.fileformat.info/info/unicode/char/26a1/fontsupport.htm (which does not cover all fonts but most fonts that people probably have on their computers).

Even if the other fonts used are monospace font, they may have different advance widths for characters. For example, Everson Mono has a slightly smaller width than DejaVu Sans Mono. Being monospace means just that within the font, all characters have the same advance width.

So you would need to use a single font that contains all the characters you need. For this collection of characters, the two above-mentioned fonts are probably the only publicly distributed monospace fonts that contain them all. Well, there is unifont, but it is a bitmap font with very coarse design; it might look tolerable in 12pt size or somewhat larger.

这篇关于如何在HTML中使用等宽字体显示特殊的Unicode字符并保留字符宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！