Question

我目前正在为一家代理机构开发一个新网站，我必须导入一些他们给我的字体文件。它不起作用，我无法弄清楚原因。

我正在使用Bootstrap 3（使用LESS），以下是我的代码的不同部分：

variables.less

@font-face {
  font-family: "Mohave", sans-serif;
  src: url('fonts/Mohave.otf');
}

@font-family-sans-serif:  "Mohave", sans-serif;
@font-family-base:        @font-family-sans-serif;

styles.less

.nav-menu li a {
  text-transform: uppercase;
  font-family: @font-family-base;
  font-size: 18px;
  line-height: 18px;
  letter-spacing: 4px;
}

我想用我的＆＃39; Mohave＆＃39;我的.nav-menu li a中的字体但它不起作用，我不知道为什么，我无法查看代码中的问题所在。

PS：我使用@font-family-base，因为我使用了其他几种Google字体。我只用我的问题贴了有关的代码。

Answer 1

有一个混音：

/*
 A mixin for complete font-families with fallbacks, weights
 and font-style. Later in your fontsetting.less file or
 whatever you name it, you only need a .font-family, .font-family-bold
 and so on.
*/
.font-family(@font-family: "Font Family", @font-weight: weight, @font-style: style) {
  font-family: @font-family, your, wonderful, fallback, fonts, go, here;
  font-style: @font-style;
  font-weight: @font-weight;
}

.font-family-bold() {
  .font-family('Font Family', 700);
}

.font-family-italic() {
  .font-family('Font Family', italic);
}

/* let's cover it although (most of the time) it's ugly */
.font-family-bold-italic() {
  .font-family('Font Family', 700, italic);
}

当您想要在不同的上下文中使用字体时，这应该会派上用场。 =）只需用有意义的内容替换类，并将后备内容添加到自定义字体中。

在Less中使用@ font-face导入字体文件

1 个答案: