Question

@font-face
  font-family: MyFont
  src: url(https://.../font_name.ttf?raw=true)

$font-main: 'MyFont' , sans-serif

.some_class
font-family: $font-main

当我使用来自网络的MyFont时，没有任何效果。如何正确地做到这一点？

Answer 1

您不需要添加.ttf，只需在主@import文件的顶部添加字体.scss网址：

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

然后使用它：

//store it in variable first
$font-main: 'Overpass', sans-serif;
//to use it   
.selector {
   font-family: $font-main;
}

这最适合浏览器兼容性。

编辑2：如果由于某种原因您仍想加载.ttf文件，请在顶部的sass文件中设置其名称和路径：

@font-face {
   font-family: 'myFont';
   src: url("fonts/myFont.ttf") format("truetype");
}

然后使用它：

$font-main: 'myFont', sans-serif;
.selector {
    font-family: $font-main;
}

Demo Snippet 1 - 通过传统CSS加载字体：

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

＆＃13;

@import url('https://fonts.googleapis.com/css?family=Overpass');
div {
  font-family: 'Overpass', sans-serif;
}
span {
  font-family: sans-serif;
}

＆＃13;

<div>Overpass font loaded</div>
<span>regular sans-serif</span>

＆＃13;

Demo Snippet 2 - 在<head></head>标记之间通过HTML加载字体：

<link href="https://fonts.googleapis.com/css?family=Overpass" rel="stylesheet">

＆＃13;

div {
  font-family: 'Overpass', sans-serif;
}
span {
  font-family: sans-serif;
}

＆＃13;

<link href="https://fonts.googleapis.com/css?family=Overpass" rel="stylesheet">
<div>Overpass font loaded</div>
<span>regular sans-serif</span>

＆＃13;

演示字体取from here

如何在SASS中从Web添加.ttf字体文件以在HAML中显示

1 个答案: