css - 在 Bootstrap 中使用没有文件扩展名的自定义 Mac 字体

Question

我想使用字体设计师为我的组织设计的一款很棒的字体。该字体是没有文件扩展名的 Mac 字体，Sublime Text 2 似乎无法识别它。我正在使用 Bootstrap 构建网站并想使用该字体 - 如何将其转换为 woff？

我在 Mac 终端上使用了 file -I 命令，它给了我:

application/x-empty; charset=binary

Answer 1

您可以使用 Webfont generator 将其转换为网络字体字体松鼠。之后，您可以将其添加到您的 CSS 中以使字体正常工作。

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}