css导入字体不起作用

Question

我的p元素有问题。

这是我的html和css

@font-face {
    font-family: 'Raleway Medium';
    src: url('Raleway-Medium.ttf') format('truetype');
}
.item_txt{
    padding-top : 10px;
    box-sizing: border-box;
    padding-right: 15px;
    padding-left: 95px;
    font-size: 21px;
    color : #F9F9F9;
    text-align: left;
    cursor: pointer;
    font-family: 'Raleway Medium' !important;
}

我尝试导入自定义字体，但失败了。

<div class="col-sm-7 col-sm-offset-2">

            <div class="item_box">
                <img src="images/boardicon1.png" class='item_img'>
                <p class="item_txt">Mother Board</p>
            </div>
          </div>

ႈ这是项目目录。

Answer 1

将它放在样式表的顶部：

@import url('https://fonts.googleapis.com/css?family=Raleway');

使用它来使用某些元素上的字体：

p {
   font-family: 'Raleway', sans-serif;
}

Answer 2

问题是，如果您渲染它的计算机将字体安装为TrueType字体，但（如果它在Web上）并且呈现该页面的用户没有该字体，则它可以正常工作在本地安装它将回退到浏览器默认值或默认值（如果已定义）。您需要使用该字体的Web版本，woff或woff2。即使您没有要求，使用谷歌字体也会让您恢复网络版。搜索woff / woff2版本的字体和我们。