14、使用 Less 处理字体的全面指南

使用 Less 处理字体的全面指南

1. 使用预构建库处理字体

在之前的示例中，我们使用 @font-face 将自定义字体嵌入到页面中，这让我们在字体选择上不受限制，因为可以下载并使用有合适许可的字体。不过，我们还能做得更好，Less 的一个重要原则是 DRY（Don’t Repeat Yourself）原则，我们可以借此机会实践这一原则。

1.1 使用预构建库的步骤

• 步骤 1 ：打开 fontface.html 的副本，修改 Less 文件的链接，如下所示：

<title>Demo: Using @font-face</title>
<link rel="stylesheet/less" href="css/fontface-ml.less">
<script src="js/less.min.js"></script>
</head>

• 步骤 2 ：将其保存为 fontface-ml.html 。在新文件中添加以下代码：

@import "lesshat.less";
@my-font-name: 'pt_sansregular';
@fontfile: '../fonts/PTS55F-we