如何在Zurb foundation项目中安装新的字体系列

Question

你能告诉我如何在Foundation项目中添加新的字体族吗?这个新的字体族可以安装在本地或外部像谷歌字体Web。

谢谢。

Answer 1

你可以创建你的mixin

@mixin font-face($style-name, $file, $family, $category:"") {
    $filepath: "fonts/" + $family + "/" + $file;
    @font-face {
        font-family: "#{$style-name}";
        src: url($filepath + ".eot");
        src: url($filepath + ".eot?#iefix") format('embedded-opentype'), url($filepath + ".woff") format('woff'), url($filepath + ".ttf")  format('truetype'), url($filepath + ".svg#" + $style-name + "") format('svg');
    }
    %#{$style-name} {
        font: {
            @if $category != "" {
                family: "#{$style-name}", #{$category};
            }
            @else {
                family: "#{$style-name}";
                weight: normal;
            }
        }
    }
}

并像这样使用

@include font-face($style-name, $file, $family, $category);

在网上快速找到答案

Answer 2

<style>
     @import url('https://fonts.googleapis.com/css?family=yourFontFamilyName');
</style>

现在在inline css中使用这个字体族。样式标签被一些webmail(例如gmail)移除，所以你可以把它放在body里面。

如果你打算使用基础架构，那么把上面的行放在foundation.css