css - 关于 CSS::first-letter 和 UTF-8 mb4 的兼容性

Question

所以，这是我的问题:我正在创建一个网站，上面有一些帖子。在这些帖子中，我突出显示了“::first-letter”以使其更大，并且效果很好。

但是，当我要加载首字母为 UTF-8 mb4(2 个 Unicode 字符)的 Unicode 表情符号的帖子时，它失败了，因为我尝试将单个字符加载为 2 个分隔符，所以结果有些奇怪。

这是截图:

你怎么看出来的，有大写字母和小写字母不明，然后是同一个表情符号，因为我发了一个帖子，同一个表情符号写了2次。

.first_letter_post::first-letter {
  float: left;
  padding-right: 20px;
  padding-top: 0px;
  margin-bottom: -15px;
  margin-top: -10px;
  font-size: 50px;
  font-weight: bold;
  text-transform: uppercase;
}

<p class="first_letter_post">🗿foobar</p>

这是字符:🗿，我正在使用谷歌浏览器。

我希望有人能帮我解决这个问题。

Answer 1

Chrome 对 unicode 问题的了解由来已久 [bug] .这个问题是这些问题的组合:

1. 未能正确识别超过 3 个字节的符号。
2. 无论是字母单位还是样式符号

这会导致 Chrome 撕裂单个符号。

IE 正确识别由多个代码点组成的 unicode 符号并应用样式，而不管规范是否声明 ::first-letter 应应用于 typographic letter units只要。

Firefox 对规范非常严格，不会将样式应用于非字母单位。我无法确定是否应将字母数字补充空间视为 letter as well , 但 Firefox 并没有这样对待它们。

这意味着，当您严重依赖 ::first-letter 并且知道这些字符可能会出现时，您应该避免使用它。

我能想到的一个可能的解决方案是通过 javascript 手动检测第一个字符并将其包装在标签中，然后应用样式。由于硬编码的十六进制值，我的解决方案有点困惑，但它可能就足够了。

// manually wrapping the "first character"
Array.prototype.forEach.call(document.querySelectorAll("div"),function(el){wrapFirstChar(el)});

function wrapFirstChar(div){
  let content = div.innerHTML,chars=content.charCodeAt(0) >= 55349?2:1;
  div.innerHTML = "<span>"+content.substring(0,chars)+"</span>"+content.substring(chars);
}

// this is what javascript sees at the first two positions of the string
//Array.prototype.forEach.call(document.querySelectorAll("p"),(e)=>console.log(e.innerHTML.charCodeAt(0)+"+"+e.innerHTML.charCodeAt(1)));

p::first-letter {
  font-weight: bold;
  color:red;
}
span {
  font-weight: bold;
  color:blue;
}
p{
margin:0;
}

<h2>using ::first-letter</h2>
<p>🗿 4 bytes symbol</p>
<p>🅰 Enclosed Alphanumeric Supplement 1F170</p>
<p>𝞹 Mathematical Alphanumeric Symbols 1D7B9</p>
<p>𞸀 Arabic Mathematical Alphabetic Symbols 1EE00</p>
<p>a normal character (1 byte)</p>

<h2>manually replaced</h2>
<div>🗿 4 bytes symbol</div>
<div>🅰 Enclosed Alphanumeric Supplement 1F170</div>
<div>𝞹 Mathematical Alphanumeric Symbols 1D7B9</div>
<div>𞸀 Arabic Mathematical Alphabetic Symbols 1EE00</div>
<div>a normal character (1 byte)</div>