有趣的 ::first-letter

[yisibl]

🙈本文正在施工中，请保持关注。🙈

Unicode 中将字符分为了七大类，其中大写的 P 表示标点符号，具体的分类如下：

类别	表示
C	（所有控制字符）Cc、Cf、Cs、Co 和 Cn。
L	（所有字母）Lu、Ll、Lt、Lm 和 Lo。
M	（所有附加符号标记）Mn、Mc 和 Me。
N	（所有数字）Nd、Nl 和 No。
P	（所有标点）Pc、Pd、Ps、Pe、Pi、Pf 和 Po。
S	（所有符号）Sm、Sc、Sk 和 So。
Z	（所有分隔符）Zs、Zl 和 Zp。

然后每个大的分类下面进一步细分，本文涉及到的标点符号具体的含义如下：

类别	英文全称	含义	CSS 版本
Pc	ConnectorPunctuation	指示字符是连接两个字符的连接符标点。	CSS Pseudo-Elements 4
Pd	DashPunctuation	指示字符是短划线或连字符。	CSS Pseudo-Elements 4
Ps	OpenPunctuation	指示字符是成对的标点符号（例如括号、方括号和大括号）之一的开始字符。	CSS 2
Pe	ClosePunctuation	指示字符是成对的标点符号（例如括号、方括号和大括号）之一的封闭字符。	CSS 2
Pi	InitialQuotePunctuation	指示字符是开始或前引号。	CSS 2
Pf	FinalQuotePunctuation	指示字符是封闭或后引号。	CSS 2
Po	OtherPunctuation	指示字符是标点，但它不是连接符标点、短划线标点、开始标点、结束标点、前引号标点或后引号标点。	CSS 2

Firefox 48 之前，::first-letter 仅支持 CSS 2 中规定的 "open" (Ps), "close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po) 标点。

Punctuation (i.e, characters defined in Unicode [UNICODE] in the "open" (Ps), "close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po) punctuation classes), that precedes or follows the first letter should be included, as in:

CSS Pseudo-Elements 4 中做了些许修改，所有的标点符号全部包含在内：

Punctuation (i.e, characters that belong to the Punctuation (P*) Unicode general category [UAX44]) that precedes or follows the first typographic letter unit must also be included in the ::first-letter pseudo-element.

所以 Firefox 48 之前并不支持 Pc（例如 ﹏） 和 Pd（例如 -，_）中的字符，这里修复了这个问题。其他浏览器的支持也不正确，::first-letter 应该选中第一个标点符号以及第一个字符。
（截图来自 MDN 文档 ）

符合规范的效果应该是这样的：

[hexuanzhang]

mark

[Zoe0511]

你好，我在使用iconfont时发生了一件很严重的事情，我之前一直用的微博账号登录iconfont，一段时间没登录，刚刚上去的时候发现项目图标库全都丢失了，个人图标库是空的！！我用Sketch的语雀插件关联了iconfont账号，在插件里是有显示的，这个问题很严重是在于，上面的上千个图标是集团公司要求保密不能外泄的设计资料，如果被公司查到，会危及我的工作，请务必要给我一个回复！而且这不是我第一次在iconfont上丢失图标库内容，上一次丢失的时候是涉及的项目图标内容保密性要求不严格，可以忽略影响，但是现在这个是很严重的设计资料外泄，请及时与我联系恢复我的数据！！

[yisibl]

@Zoe0511 感谢你的反馈。

这种情况通常是使用了其他的微博登录导致的，所有的原账号的数据都还在，他人是无法登录的。只要原始账号上传的图标是私有的，就不会泄露。

我们工作使用钉钉，请留下钉钉联系方式，我与你联系哈。