Font Include Sass Mixin
前期以前给大家介绍过一个使用google font的mixin(详见《Google Fonts Sass Mixin》),今天我们再进一步给大家推荐个使用web font的mixin。
使用web font,我们须要使用@font-face导入字体文件,然后才干够使用,@font-face的使用格式例如以下
@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}
由于不能的浏览器支持的字体格式不一致,因此我们须要一股脑导入若干多钟字体格式,貌似以下这样。
@font-face {
font-family: 'nfoswjeos3500regular';
src: url('3500-webfont.eot');
src: url('3500-webfont.eot?#iefix') format('embedded-opentype'),
url('3500-webfont.woff') format('woff'),
url('3500-webfont.ttf') format('truetype'),
url('3500-webfont.svg#nfoswjeos3500regular') format('svg');
font-weight: normal;
font-style: normal;
}
太烦躁了,麻烦,作为一个注重效率、喜欢偷懒的程序员,我们当然得有妙招了,来看看这个mixin。
@mixin importfont($font-family, $font-filename, $font-weight : normal, $font-style :normal, $font-stretch : normal) {
@font-face {
font-family: '#{$font-family}';
src: url('#{$font-filename}.eot');
src: url('#{$font-filename}.eot?#iefix') format('embedded-opentype'),
url('#{$font-filename}.woff') format('woff'),
url('#{$font-filename}.ttf') format('truetype'),
url('#{$font-filename}.svg##{$font-family}') format('svg');
font-weight: $font-weight;
font-style: $font-style;
font-stretch: $font-stretch;
}
}
然后如此这般使用
@include importfont('Font Name', 'fonts/fontfilename', 400);
有没有瞬间轻松,好的,剩下时间玩个游戏撒。
----------------------------------------------------------
前端开发whqet,关注前端开发,分享相关资源,欢迎点赞,欢迎拍砖。
---------------------------------------------------------------------------------------------------------
Font Include Sass Mixin的更多相关文章
- css预编译语言sass——mixin的使用
以根据不同屏幕吃寸动态应用背景图片为例 新建一个mixin如下: @mixin bg_img($path, $ext){ @media screen and (max-device-width: 76 ...
- SASS @mixin 遇到的坑
@mixin borderTop($size:1px,$type:solid,$color:red){ border-top:$size $type $color; } .border_top{ @i ...
- [Scss Flex] Reuse Flexbox Styles With A Sass Mixin
This lesson covers flexbox in a reusable mixin that should cover most layout situations on your site ...
- Sass mixin 使用css border属性画三角形
To be finished. //triangle@mixin css-triangle ($direction: "down", $size: 20px, $color: #0 ...
- sass mixin 持续更新
控制多行显示省略号... //文字溢出省略号@mixin coveText($num:1){ @if $num == 1{ white-space: normal; overflow: hidden; ...
- SASS实现代码的重用:混合器Mixin、继承
1. 继承: @extend sass允许一个选择器,继承另一个选择器,通过@extend实现 .class1{ border: 1px solid #333; } .class2{ @extend ...
- sass之mixin的全局引入(vue3.0)
sass之mixin的全局引入(vue3.0) 1.scss文件(mixin.scss) /* 渐变 */ @mixin gradual($color, $color1){ background: $ ...
- 关于前端CSS预处理器Sass的小知识!
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
- SCSS(SASS、CSS)学习
看的这篇文章 http://www.frostsky.com/2014/07/sass-scss/ 写的还比较清晰 SASS是CSS3的一个扩展,增加了规则嵌套.变量.混合.选择器继承等等.通过使用命 ...
随机推荐
- HDU 5136 Yue Fei's Battle
题目链接:HDU-5136 网上的一篇题解非常好,所以就直接转载了.转自oilover的博客 代码: #include<cstring> #include<cstdio> #i ...
- Android内存溢出解决方案总结
我的视频会议中有三个内存泄露的崆点: 1) BNLiveControlView mView = this; 未释放 (自定义view中自己引用自己造成) 2) 在自定义View中区注册了系统的网络变化 ...
- 对list对象进行排序
List<LjlSevOrdersVO> list = ljlSevOrdersService.findSevForOrders(ljlSevOrdersVO); //查出所有是自愿者的订 ...
- mysql数据库隔离级别
# 原创,转载请留言联系 事务的隔离级别 (由高到低)1.串行化(serializable):一个事务一个事务的执行2.可重复读(Repeatable-Read) 可重复读,无论其他事务是否修改并提交 ...
- ueditor在QQ浏览器或者IE浏览器中无法加载
因为IE浏览器有兼容问题,打开网址,浏览器不一定以最新的文档模式加载.按F12查看 在你网址的head标签中加入:<meta http-equiv="x-ua-compatible&q ...
- 自定制Form组件
代码 import re import copy class ValidateError(Exception): def __init__(self,detail): self.detail = de ...
- 自定义wordCount程序、
1.MyWordCount代码: package com.hadoop.mr; import java.io.IOException; import org.apache.hadoop.conf.Co ...
- Commons CLI 学习(1)
The Apache Commons CLI library provides an API for parsing command line options passed to programs. ...
- ubuntu 软件包(package)更换源(source)为阿里云镜像 update&upgrade
在ubuntu下用apt-get install安装软件时,发现package list中没有所需的软件, 估计可能是package list太旧了,于是需要apt-get update & ...
- DotNetCore 微服务上传附件
后台接口升级成netcore 2.0了,然后之前的上传图片的接口就不再使用了.新的接口形式 #region IFormCollection /// <summary> /// IFormC ...