如何在 SASS 中添加来自 web 的 .ttf 字体文件以在 HAML 中显示

本文介绍了如何在 SASS 中添加来自 web 的 .ttf 字体文件以在 HAML 中显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

@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 时，没有效果.如何正确执行此操作?

When I use MyFont coming from web there is no effect. How to do this properly?

推荐答案

您不需要添加 .ttf，只需将字体 @import url 包含在主 .scss 文件中的顶部:

You don't need to add a .ttf, simply include the font @import url at the top in your main .scss file:

@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;
}

这最有利于浏览器兼容性.

This would be best for browser compatibility.

如果您仍然想加载 .ttf 文件，请在顶部的 sass 文件中设置它的名称和路径:

If for whatever reason you still want to load a .ttf file, in your sass file at the top set it's name and path:

@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 加载字体:

Demo Snippet 1 - loading font via conventional 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;
}

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

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

Demo Snippet 2 - loading font via HTML in-between your <head></head> tags:

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

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

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

演示字体取自此处

这篇关于如何在 SASS 中添加来自 web 的 .ttf 字体文件以在 HAML 中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！