Question

如何在较少的

中调用字体

我尝试了以下代码。但它不起作用

@colr : red;

.font-face(@fontfamily) {

        @font-face {
            font-family: @fontfamily;
            src: url("fonts/@{fontfamily}.eot");
            src: url("fonts/@{fontfamily}.eot?#iefix") format('embedded-opentype'),
                 url("fonts/@{fontfamily}.woff") format('woff'),
                 url("fonts/@{fontfamily}.ttf") format('truetype'),
                 url("fonts/@{fontfamily}.svg#@{fontfamily}") format('svg');
            font-weight: normal;
            font-style: normal;
        }
    }


    .class1{    
        color:@colr;
        margin:10px 20px 30px;
        .font-face(bebas_neuebold);
    }

请帮帮我

Answer 1

发生这种情况是因为您忘了将font-family分配给您的班级。

您需要在mixin中复制font-family规则才能获得略有不同的CSS，因为在@font-face规则中您声明了＆＃34; 字体名称＆＃ 34;将通过font-family规则使用。这里是LESS代码中的关键修改：

<强> LESS ：

.font-face(@fontfamily) 
{
  font-family:@fontfamily;

  @font-face {
    font-family: @fontfamily;
    src: url("fonts/@{fontfamily}.eot");
    ...
  }
}

允许您使用以下编译的CSS（此处仅.class1代码）：

<强> CSS ：

.class1 {
  color: red;
  margin: 10px 20px 30px;
  font-family: bebas_neuebold;
}

通过这种方式，您明确指定font-family用于.class1元素。

建议提高互操作性：

我建议您在最终声明中添加后备字体系列，建议不支持@font-face规则的旧浏览器或远程字体下载问题。

可能的解决方案可能是：

.font-face(@fontfamily) 
{
  font-family:@fontfamily, verdana, arial, sans-serif;

  @font-face {
    font-family: @fontfamily;
    src: url("fonts/@{fontfamily}.eot");
    ...
  }
}

要完成答案，这里是我建议你的最终完整代码：

@colr:red;

.font-face(@fontfamily) 
{
  //Indicates that the "font-family" to be used is "@fontfamily"
  font-family:@fontfamily, verdana, arial, sans-serif;

    @font-face 
    {
      //Create a new "font-family" with name "@fontfamily", using "src:" as source files
      font-family: @fontfamily; 

      src: url("fonts/@{fontfamily}.eot");
      src: url("fonts/@{fontfamily}.eot?#iefix") format('embedded-opentype'),
           url("fonts/@{fontfamily}.woff") format('woff'),
           url("fonts/@{fontfamily}.ttf") format('truetype'),
           url("fonts/@{fontfamily}.svg#@{fontfamily}") format('svg');
      font-weight: normal;
      font-style: normal;
    }
}

.class1
{    
  color:@colr;
  margin:10px 20px 30px;

  .font-face(bebas_neuebold);
}

在较少的CSS中调用@ font-face

1 个答案: