@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时,没有任何效果.怎么做得好？
您无需添加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;
}<div>Overpass font loaded</div>
<span>regular sans-serif</span>Demo Snippet 2 - 在<head></head>标签之间通过HTML加载字体:
<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>演示字体取自此处
| 归档时间： |
|
| 查看次数： |
6675 次 |
| 最近记录： |