Css 如何为基础按钮设置自定义字体 我试图为基础6中的按钮设置一个自定义字体系列，没有运气，我用SASS运行基础6，并且相信他们已经删除了以前版本中的 $按钮字体家族变量。在没有变量的情况下，实现这一目标的最佳解决方案是什么 理想的是，我想在按钮文本上应用文本转换，这也不是在SytStudio.sASS基础文件中的按钮变量。正如你可能已经收集到的，我对基金会和SASS很新，所以任何帮助都将非常感激。

它看起来不像是在

scss/components/\u button.scss

中指定了字体系列，而这正是定义按钮SYLE的地方。

$body字体系列

在

scss/settings/\u settings.scss

和

scss/\u global.scss

中都有设置（如果尚未在

\u settings.scss

中定义）。因此，请确认您已在此处更新了

$body font-family

的值

除此之外，如果您使用的是基础SASS语义（即MIXIN），您应该能够使用<代码>按钮< /C> > MIXIN，如：

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

..然后像通常一样在混合后设置字体族属性

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

这是我现在正在进行的一个基金会的主要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";

我将一节一节地讲一遍。这很简单，一旦你有了这样的项目，你会喜欢它的

<基础设置/X设置的作者拷贝。SCSS

这里，我们正在导入一个基金会Stays.ssS文件的副本，并根据需要修改它。不要弄乱与基础一起航行的原始的SO设置文件。这样做将使更新库变得更加困难

：/基金会全球的作者拷贝。SCSS

与_设置文件的概念相同

//从基金会导入

这些导入是我想在这种情况下使用的基础框架的唯一部分。这些组件文件包括用于生成这些组件的mixin。这允许我们在代码中语义上使用mixin

//包含我们希望使用

的基础类/样式

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

//作者变量

这是我放置自定义变量的地方（与Foundation无关）。如果你愿意的话，你可以把它放在另一个部分——只是一个偏好

//作者组件

这些是项目的自定义组件，可以使用也可以不使用基金会的mixin。关键是，如果我们现在已经包含了我们想要使用的组件/混合，那么我们可以

因此，在您的情况下，您可以简单地执行以下操作：

// 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; }
}

---

我已经在_设置文件中更改了$body字体系列，但是我希望按钮字体与此不同。解决方案是进入<代码> SCSS/Tease/YouthButo.SCSS并添加$Butt字体族变量，或者它不是那么简单吗？嗯……它是直的，但是你应该像原来一样离开基础库，并创建自己的代码> <代码>文件，覆盖默认设置。这样，您可以轻松地更新基础，而不会丢失您的自定义样式。我会更新我的答案来详细说明一下。我相信我确实有一个_设置覆盖，但当我在其中添加

$button font family

变量时，它不会更改按钮字体。我已经尝试了你的解决方案与自定义类与一个MIXIN，但我希望使用的大小函数与按钮类，例如“代码> < /Cord>”你可以使用按钮大小，就像基金会。我更新了示例以显示这一点。读一下X.Buto.SCSS文件注释，你可能会发现很多有用的信息。哦，基金会不使用名为$Butt字体家族的变量。如果你想使用这个变量，你需要把它放在我放置$special button字体的地方。