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

演示字体取自此处

您无需添加a .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');

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

Overpass font loaded
regular sans-serif