时间戳

首页 > 解决方案 > 为什么我不能在 Material Design Lite 中使用自定义字体？

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

问题描述

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

标签： javascripthtmlcssfontsmaterial-design-lite

解决方案

有两个可能的原因：

  1. 您引用的文件字体无法解析（链接错误或文件损坏/无效/截断） - 这应该会在您的控制台日志中创建一些条目（大多数浏览器在无法解析资源时会发出警告）

  2. 您有一个更强大的选择器对您尝试设置样式的元素应用不同的规则（右键单击> “检查元素” >查找font-family值和设置它的内容 - 大多数浏览器允许您进行这种类型的检查；如果您没有，请使用铬或火狐）。
    非常重要：请注意，即使您font-family为父级指定了 a，如果子级指定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>

如您所料，将为<p>您内部的元素提供and not<body>的值。sans-serifmonospace

最有可能的是，您需要找到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应用了更强的选择器 ( )。

推荐阅读