如何在 SASS 中添加来自 web 的 .ttf 字体文件以在 HAML 中显示 [英] How to add a .ttf font file from web in SASS to be displayed in 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 中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
