时间戳

首页 > 解决方案 > MaterialIcons-Regular 应用任何 CSS *:first-letter 时的字体错误

css - MaterialIcons-Regular 应用任何 CSS *:first-letter 时的字体错误

问题描述

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

 *:first-letter {
    color: #000 
}

关于这里可能有什么问题的任何想法？

想看看我的意思吗？在 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>

你可以删除

*：首字母{颜色：蓝色；}

随意行。

任何解决方法表示赞赏，谢谢

标签： cssgoogle-chromegoogle-material-icons

解决方案

嗯...这似乎是因为这是一种连字字体。

当应用这个伪元素cloud时"cloud"，它在 Mat-icons 中没有等价物。同样地network_check，"network_check"有可能并且确实有MI等价物。也许可能有效？networkcheck *: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>

推荐阅读