当应用任何 CSS *:first-letter 时，MaterialIcons-Regular 作为字体错误

Question

如果我在此选择器上应用任何 CSS 规则，而在 Chrome 上应用任何 CSS 规则，我的 MaterialIcons-Regular 图标会消失或分解成两个不同的图标。

 *:first-letter {
    color: #000 
}

知道这里可能有什么问题吗？

想明白我的意思吗？ Link 在 Firefox 和 Chrome 中打开： https://jsfiddle.net/z7xmf81u/

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<style>
*:first-letter {color: blue;}
h1   {color: blue;}
p    {color: red;}
</style>

<body>
<p>test</p>
<i class="material-icons">cloud</i>
<i class="material-icons" style="font-size:48px;">cloud</i>
<i class="material-icons" style="font-size:60px;color:red;">cloud</i>
<i class="material-icons" style="font-size:60px;color:red;">network_check</i>

</body>
</html>

您可以删除

*:first-letter {color: blue;}

随意排队。

感谢任何解决方法，谢谢

Answer 1

嗯……好像是因为这是连字字体。

当应用此伪元素时，cloud 变为 "cloud"，在 Mat-icons 中没有等效项。同样 network_check 变成 "network_check" 并且可能 network 和 check do 有 MI等价物。也许 *:not(.material-icons) 可行？

*:not(.material-icons):first-letter {
  color: blue;
}

h1 {
  color: blue;
}

p {
  color: red;
}

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>


<body>
  <p>test</p>
  <i class="material-icons">cloud</i>
  <i class="material-icons" style="font-size:48px;">cloud</i>
  <i class="material-icons" style="font-size:60px;color:red;">cloud</i>
  <i class="material-icons" style="font-size:60px;color:red;">network_check</i>

</body>

当应用任何 CSS *:first-letter 时，MaterialIcons-Regular 作为字体错误

MaterialIcons-Regular as font bugs when any CSS *:first-letter is applied

css

google-chrome

google-material-icons