为什么我不能在 Material Design Lite 中使用自定义字体？答案

【问题标题】：Why can't I use custom font with Material Design Lite?为什么我不能在 Material Design Lite 中使用自定义字体？
【发布时间】：2018-04-29 10:52:26
【问题描述】：

今天我学习了如何使用 Material Design Lite。但我有一个问题：我不能使用自定义字体。我该如何解决这样的问题？

如果我从文件中删除<link rel="stylesheet" href="css/material.min%202.css" />，它会将我的字体更改为Raleway。但如果我仍然使用<link rel="stylesheet" href="css/material.min%202.css" />，它会将我的字体替换为默认字体。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/material.min%202.css" />
        <style>
            @font-face{ 
                font-family: 'Raleway';
                src: url('WebFont.eot');
                src: url('./fonts/raleway-regular-webfont.woff') format('woff'),
                    url('./fonts/Raleway-Regular.ttf') format('truetype');
            }
            .container{
                font-family: 'Raleway';
            }
        </style>
    </head>
    <body>
        <br>
        <div class="container">
            <div class="centered">
                <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
                    Button
                </button>
                <h2>Harap segera lakukan verifikasi email anda untuk bisa melanjutkan ketahap berikutnya.</h2>
            </div>
        </div>
       <script src="js/material.min.js"></script>
    </body>
</html>

【问题讨论】：

试试font-family: 'Raleway' !important;。
还是一样，不能换字体。
好的。 .container *{ font-family: 'Raleway' !important; }?
哇，它有效。顺便说一句，* 在 css 中做什么？
酷。 * 是 all 的选择器。在您的情况下，.container 中的所有 children。这有点棘手。因为Material 设置了自己的字体。它可能会在您的style 之后加载。所以你想变得很难。祝你好运！

标签： javascript html css fonts material-design-lite

【解决方案1】：

有两种可能的原因：

您引用的文件字体无法解析（链接错误或文件损坏/无效/截断） - 这应该会在您的控制台日志中创建一些条目（大多数浏览器在无法解析时会发出警告解决资源）
你有一个更强大的选择器对你尝试设置样式的元素应用不同的规则（右键单击> “检查元素” > 找到font-family 值以及设置它的内容- 大多数浏览器都允许您进行此类检查；如果不允许，请使用 Chrome 或 Firefox）。
非常重要：请注意，即使您为父母指定了 font-family，如果孩子有指定的font-family，它将忽略来自父母的任何 font-family，无论父母规则中的选择器强度如何。
例如：

body {
  font-family: monospace !important;
}
p {
  font-family: sans-serif;
}

<p>I am &lt;p>.</p>
<div>I am not &lt;p>.</div>

会给<body> 中的<p> 元素赋值sans-serif 而不是monospace，正如你所期望的那样。

很可能，您需要为您的元素找到规则设置font-family 并在相同（父）级别或更低级别（在子级别）覆盖它。试图从当前设置的位置覆盖它是行不通的。

从父级覆盖font-family 的一个好技巧是使用

parentSelector * { 
  font-family: value !important; 
}

...因为这将匹配在子级别设置的任何规则，并且 !important 将被应用：

body * {
  font-family: monospace !important;
}
p#some-id {
  font-family: sans-serif;
}

<p id="some-id">I am &lt;p>.</p>
<div>I am not &lt;p>.</div>

在此示例中，body * 和 p#some-id 指的是同一个孩子，并且应用了更强的选择器 (!important)。

【讨论】：

谢谢，很少有人在 MDL repo 上询问这个问题，大多数情况下他们没有得到答案。我希望这个问题和答案能帮助需要它的人。对不起我的英语不好。