在前端开发中，使用图片、字体等资源是非常普遍的。在 Less 中，我们也可以很方便地使用这些资源。本文将介绍如何在 Less 中使用图片、字体等资源，并提供示例代码。
使用图片资源
在 Less 中，我们可以使用 background、background-image 等属性来设置背景图片。例如，以下代码将背景图片设置为 img/bg.jpg：
body {
background-image: url('img/bg.jpg');
}如果图片的路径比较复杂，我们可以使用 ~ 符号来表示相对于根目录的路径。例如，以下代码将背景图片设置为 src/assets/img/bg.jpg：
body {
background-image: url('~src/assets/img/bg.jpg');
}除了 background、background-image 属性外，我们还可以使用 content 属性来设置图片，例如：
.icon {
content: url('img/icon.png');
}使用字体资源
在 Less 中，我们可以使用 @font-face 规则来定义字体，然后使用 font-family 属性来引用字体。例如，以下代码定义了一种名为 MyFont 的字体：
@font-face {
font-family: 'MyFont';
src: url('fonts/MyFont.ttf') format('truetype');
}然后，我们就可以在样式中使用 MyFont 字体了：
body {
font-family: 'MyFont', sans-serif;
}总结
使用图片、字体等资源是前端开发中非常常见的操作。在 Less 中，我们可以使用 url() 函数来引用图片资源，使用 @font-face 规则来定义字体资源。希望本文能够对你有所帮助。
示例代码
-- -------------------- ---- ------- ---------- - ------------ --------- ---- ----------------------- ------------------- - ---- - ----------------- ------------------------------ ------------ --------- ----------- - ----- - -------- -------------------- -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f7bb1cd10417a222309ff7