我們如何使用@ font-face in Less

在Less中，似乎幾乎不可能使用@font-face選擇器。以下給出了錯誤，當我嘗試使用我們如何使用@ font-face in Less

font-family: my_font

這裏是我嘗試使用它：

@font-face { 
    font-family: my_font; 
    src: url('http://contest-bg.net/lg.ttf'); 
} 
p { 
    font-family: my_font, "Lucida Grande", sans-serif; 
}

有欠簡單的逃生使用~"..."但不能拿出工作代碼。
有人使用過它嗎？

來源

2011-12-01 sensor

我從來沒有在@ESS中使用@ font-face的問題。儘管如此，我正在使用PHP實現，所以我猜這是原始漏洞的一個缺陷。你可能想嘗試把「my_font」放在引號中（不知道它是否有用，但肯定不會使事情變得更糟，嘿嘿）。 – mingos

什麼是錯誤？ – N3dst4

您使用的是什麼版本的less.js？在什麼環境下？當我在瀏覽器或WinLess中嘗試你的代碼時，它不會出現錯誤，並且編譯正確。 –

您是否嘗試將字體系列名稱放在單引號中？以下工作對我來說很好。

@font-face { 
     font-family: 'cblockbold'; 
     src: url('assets/fonts/creabbb_-webfont.eot'); 
     src: url('assets/fonts/creabbb_-webfont.eot?#iefix') format('embedded-opentype'), 
      url('assets/fonts/creabbb_-webfont.woff') format('woff'), 
      url('assets/fonts/creabbb_-webfont.ttf') format('truetype'), 
      url('assets/fonts/creabbb_-webfont.svg#CreativeBlockBBBold') format('svg'); 
     font-weight: normal; 
     font-style: normal; 

    }

要使用的字體作爲一個mixin，嘗試：

.ffbasic() { 
    font-family: ff-basic-gothic-web-pro-1,ff-basic-gothic-web-pro-2, AppleGothic, "helvetica neue", Arial, sans-serif; 
}

然後style聲明中：

.your-class { 
    font-size: 14px; 
    .ffbasic();  
}

來源

2012-01-10 21:06:32

是的，這也適用於我。它也適用於url中的文件沒有引號，格式中仍然有單引號。 – Rooster

另外一個音符上面的投票答案;確保你的mixin沒有括號，以便在編譯成CSS時進行解析。

完整的例子：

**在你的變量LESS文件：**

//聲明的路徑，你的字體，你可以在變量的變化較少文件

@path-fonts: '../fonts';

**在您的Mixins LESS文件中：**

.font-names 
{ 

    @font-face { 

     font-family: 'open-sans-light'; 
     src: url('@{path-fonts}/open-sans/OpenSans-Light-webfont.eot') format('enbedded-opentype'), 
      url('@{path-fonts}/open-sans/OpenSans-Light.ttf') format('truetype'), 
      url('@{path-fonts}/open-sans/OpenSans-Light-webfont.woff') format('woff'), 
      url('@{path-fonts}/open-sans/open-sans/OpenSans-Light-webfont.svg#open-sans-light') format('svg'); 

    } 

}

**在你的嵌套規則LESS文件：**

@import 'your variables less file name'; 
@import 'your mixin less file name'; 

@font-face { 

    .font-names; 

}

注：的「.font-名」的定義不具備（）後面。

來源

2014-08-27 22:50:38 Leo

我認爲這是因爲你缺少字體格式。其中ttf爲truetype，如果缺少或不正確，可能無法加載字體。

@font-face { 
    font-family: "MyFont"; 
    src: url("./my-font.ttf") format("truetype"); 
}

來源

2018-02-16 11:37:31

我們如何使用@ font-face in Less

回答

相關問題