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

Question

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

javascripthtmlcssfontsmaterial-design-lite

3

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

- Ade Guntoro

尝试使用 font-family: 'Raleway' !important;。 - deEr.

依然相同，无法更改字体。 - Ade Guntoro

好的。.container *{ font-family: 'Raleway' !important; } - deEr.

哇，它运行起来了。顺便问一下，在CSS中*是做什么的？ - Ade Guntoro

很酷。*是“全部”的选择器。在你的情况下，是.container的所有“子元素”。这有点棘手。因为“Material”设置了自己的字体。而且它可能会在你的样式之后加载。所以你要做得更加努力。祝你好运！ - deEr.

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tao · Accepted Answer

有两个可能的原因：

你引用的字体文件无法解析（链接错误或文件损坏/无效/截断），这应该会在控制台日志中创建一些条目（大多数浏览器在无法解析资源时会发出警告）
你有一个更强的选择器应用于你正在尝试样式化的元素（右键单击>"检查元素">找到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）会被应用。