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

Question

今天我学习了如何使用 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>

Answer 1

有两个可能的原因：

您引用的文件字体无法解析（链接错误或文件 corrupted/invalid/truncated）- 这应该会在您的控制台日志中创建一些条目（大多数浏览器会在任何时候发出警告他们无法解析资源）
您有一个更强大的选择器，将不同的规则应用于您尝试设置样式的元素 (right-click > "Inspect element" >查找 font-family 值及其设置 - 大多数浏览器都允许您进行此类检查；如果您不允许，请使用 Chrome 或 Firefox）。
非常重要： 请注意，即使您为 parent 指定了 font-family，如果 child 指定了 font-family它会忽略来自 parents 的 any font-family，无论 parent 规则中的选择器强度如何。
例如：

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 并在相同 (parent) 级别或更低级别（在 child 中覆盖它).试图从当前设置的上方覆盖它是行不通的。

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

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

... 因为这将匹配在 child 级别设置的任何规则，并且将应用 !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 指的是相同的 child 并且应用了更强的选择器 (!important)。

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

Why can't I use custom font with Material Design Lite?

javascript

html

css

fonts

material-design-lite