如何在 LESS 中使用 @font-face 引入字体？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，字体样式的选择和运用对于网页的视觉效果和用户体验至关重要。在使用 LESS 进行 CSS 样式编写时，我们可以使用 @font-face 引入字体，从而让网页展现更加个性化的字体样式。本文将详细介绍如何在 LESS 中使用 @font-face 引入字体。

1. 引入字体

首先，我们需要准备好字体文件。通常情况下，字体文件需要包括以下几种格式：.ttf、.eot、.svg、.woff、.woff2。这些格式可以满足不同浏览器对字体格式的要求。当然，如果你的网站只需要在某些特定的浏览器上运行，你可以只提供相应格式的字体文件。

接着，在 LESS 中使用 @font-face 引入字体。具体代码如下：

// javascriptcn.com 代码示例
@font-face {
  font-family: 'MyFont';
  src: url('fonts/MyFont.eot'); /* IE9 Compat Modes */
  src: url('fonts/MyFont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/MyFont.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/MyFont.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/MyFont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/MyFont.svg#svgFontName') format('svg'); /* Legacy iOS */
  font-weight: normal;
  font-style: normal;
}

上述代码中，我们定义了一个名为 MyFont 的字体，并指定了它的各种格式。其中，src 属性指定字体文件的路径和格式，font-weight 属性指定字体的粗细程度，font-style 属性指定字体的风格。

2. 使用字体

在定义好字体后，我们就可以在 LESS 中使用它了。具体代码如下：

h1 {
  font-family: 'MyFont', sans-serif;
  font-weight: bold;
}

上述代码中，我们将 MyFont 字体应用到了 h1 标签中，并设置了字体的粗细程度。

3. 总结

在 LESS 中使用 @font-face 引入字体是一种让网页展现更加个性化的字体样式的方法。通过本文的介绍，我们了解了如何引入字体文件和在 LESS 中使用字体，并对其进行了详细的讲解。希望这篇文章对你有所帮助，让你在前端开发中更加得心应手。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6569784dd2f5e1655d20af89