如何为基础按钮设置自定义字体

Question

我正在尝试为基金会6中的按钮设置一个自定义字体系列，但没有运气，我正在使用sass运行基金会6，并且相信他们已经删除了以前版本中的$button-font-family变量。在没有变量的情况下，实现这一点的最佳解决方案是什么？

理想情况下，我也希望对按钮文本应用文本转换，这也不是_setting.sass基础文件中的按钮变量。您可能已经收集到，我是非常新的基金会和社会科学院，因此，任何帮助将非常感谢。

Answer 1

它看起来不像是在scss/components/_button.scss中指定的字体系列，也就是定义按钮syles的地方。$body-font-family在scss/settings/_settings.scss和scss/_global.scss中都被设置(如果还没有在_settings.scss中定义的话)。因此，验证您已经更新了$body-font-family的值。

除此之外，如果您在语义上使用foundation sass (即mixin )，您应该能够像这样使用button混音：

@include button( false, #ebebeb, #a5a5a5, black, solid );

然后，..and像往常一样，在混音之后设置字体族属性。

-更新:基于后续问题/评论-

下面是我现在正在研究的一个基础站点的主sass文件示例。

// Author copy of Foundation settings/_settings.scss
@import "settings";

// Author copy of Foundation _globals.scss
@import "global";

// Import from Foundation
@import "path/to/foundation-sites/scss/grid/grid";
@import "path/to/foundation-sites/scss/typography/typography";
@import "path/to/foundation-sites/scss/components/button";

// Include Foundation classes/styles that we want to use
@include foundation-global-styles();
@include foundation-typography();

//
// Author Variables
//
$color-map : ( 'blue': #40578a, 'blue-tint': #7e8ba8, 'blue-shade': #364a75, 'dark': #3d3e41, 'silver': #bdc0c6, 'gold': #ab883c );
$blue      : map-get($color-map, 'blue');
$blue-tint : map-get($color-map, 'blue-tint');
$blue-shade: map-get($color-map, 'blue-shade');
$dark      : map-get($color-map, 'dark');
$silver    : map-get($color-map, 'silver');
$gold      : map-get($color-map, 'gold');
//
// Author Components
//
@import "common";
@import "btn";
@import "view";
@import "cover";
@import "header";
@import "hero";
@import "navbar";
@import "main";
@import "page";
@import "intro";
@import "services";

我会一节一节地看这一节。这很简单，一旦你用这种方式设置了一个项目，你就会喜欢它。

//作者基础设置/_setings.scss副本

在这里，我们将导入一个基金会_settings.scss文件的副本，并根据我们的需要对其进行修改。不要破坏基金会附带的原始_settings文件。这样做将使更新库变得更加困难。

//作者基金会_globals.scss副本

与_settings文件相同的概念。

//从基金会进口

这些导入是我想在本例中使用的基金会框架的唯一部分。这些组件文件包括用于生成这些组件的混合器。这允许我们在代码中语义地使用混联器。

//包括我们想要使用的基础类/样式

这将输出我们希望从基础中使用的预定义类/样式。通常，您至少希望包括全局和排版样式。

//作者变量

这就是我放置自定义变量(与Foundation无关)的地方。如果你想的话，你可以把它放在另一个部分--只是一个偏好。

//作者构成部分

这些是项目的自定义组件，它们可能使用或不使用基金会的混合组件。关键是，如果我们想要的话，现在我们已经包含了我们想要使用的组件/混合器。

因此，在您的例子中，您可以简单地这样做：

// Foundation settings
@import "settings";

// Foundation globals
@import "global";

// Import from Foundation
@import "../path/to/foundation-sites/scss/components/button";

//
// Author Variables
//
$special-button-font: Georgia, serif;

.special-button {
    @include button(false, #ebebeb, #a5a5a5, black, solid);
    font-family: $special-button-font;
    &.tiny     { font-size: map-get($button-sizes, tiny); }
    &.small    { font-size: map-get($button-sizes, small); }
    &.large    { font-size: map-get($button-sizes, large); }
    &.expanded { @include button-expand; }
}