在Salvo框架中使用自定义字体

在Web开发中，使用自定义字体是常见的需求。本文将介绍如何在Salvo框架中正确配置和使用自定义字体文件。

问题背景

开发者在使用Salvo框架时，遇到了自定义字体无法加载的问题。具体表现为浏览器控制台报错，提示字体文件下载失败。这是因为字体文件没有被正确托管，浏览器无法获取到这些资源文件。

解决方案

Salvo框架提供了静态文件托管功能，我们可以通过配置路由来使字体文件可被访问。以下是具体实现步骤：

1. 创建字体文件目录

首先，将你的字体文件（如.ttf/.woff等格式）放在项目目录下的某个文件夹中，例如static/fonts/。

2. 配置静态文件路由

在Salvo应用中，我们需要为字体文件设置一个静态文件路由：

use salvo::prelude::*;
use salvo::serve_static::StaticDir;

#[tokio::main]
async fn main() {
    let router = Router::new()
        .push(
            Router::with_path("fonts/<**path>")
                .get(StaticDir::new("static/fonts")),
        );
    
    let acceptor = TcpListener::new("127.0.0.1:5800").bind().await;
    Server::new(acceptor).serve(router).await;
}

这段代码创建了一个路由，将所有以/fonts/开头的请求映射到本地的static/fonts目录。

3. CSS中使用自定义字体

在CSS中，使用@font-face规则引入字体：

@font-face {
    font-family: 'Borel';
    src: url('/fonts/Borel-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'Borel', sans-serif;
}

注意URL路径要与路由配置匹配。

注意事项

1. 文件路径：确保静态文件目录路径正确，相对路径是相对于项目根目录的。

2. MIME类型：Salvo会自动设置正确的MIME类型，但如果你遇到问题，可以检查响应头中的Content-Type是否正确。

3. 缓存控制：对于字体文件这类不常变化的资源，可以考虑添加缓存控制头。

4. 跨域问题：如果字体文件需要跨域使用，确保配置了正确的CORS头。

通过以上步骤，你就可以在Salvo应用中成功使用自定义字体了。这种静态文件托管的方法同样适用于其他类型的静态资源，如图片、JavaScript文件等。