Font Include Sass Mixin

来源：互联网发布：oracle12c数据库安装编辑：程序博客网时间：2024/05/21 09:39

前期曾经给大家介绍过一个使用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，关注前端开发，分享相关资源，欢迎点赞，欢迎拍砖。
---------------------------------------------------------------------------------------------------------

7 0