Question

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

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

＆＃13;

<!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>

＆＃13;

Answer 1

有两个可能的原因：

您要引用的文件字体无法解析（链接错误或文件已损坏/无效/截断） - 这应该会在您的控制台日志中创建一些条目（大多数浏览器会在无法发出警告时发出警告解决资源）
您有一个更强的选择器，对您尝试设置的元素应用不同的规则（右键单击＆gt; ＆＃34; Inspect element＆＃34; ＆gt; find {{ 1}}值及其设置 - 大多数浏览器允许您进行此类检查;如果您没有，请使用Chrome或Firefox。）
非常重要：请注意，即使您为父母指定font-family，如果孩子有指定的font-family，也会忽略任何 font-family来自父母，无论父母统治中的选择者力量如何例如：

＆＃13;

font-family

＆＃13;

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

＆＃13;

会在您的<p>I am <p>.</p> <div>I am not <p>.</div>中为<p>元素提供<body>而不是sans-serif，正如您所期望的那样。

最有可能的是，您需要为您的元素找到规则设置monospace，并在相同（父级）或更低级别（在子级中）覆盖它。试图从当前设置的位置覆盖它将无效。

从父级别覆盖font-family的一个好方法是使用

font-family

...因为这将匹配子级别的任何规则集，parentSelector * { font-family: value !important; }将被应用：

＆＃13;

!important

＆＃13;

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

＆＃13;

在此示例中，<p id="some-id">I am <p>.</p> <div>I am not <p>.</div>和body *指的是同一个子项，并且应用了更强的选择器（p#some-id）。

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

1 个答案: