Nodejs中如何在node里加载css3字体文件？

Nodejs中如何在node里加载css3字体文件？

在没有express框架的情况下，如果要加载外部js，css，我是用的判断url.parse(req.url).pathname里的后缀名，而且成功了，但是在加载css里出现的css3字体文件就一直失败，直观的结果就是字体没变，请问怎么做呢？谢谢

3 回复

Node.js 中如何加载 CSS3 字体文件？

在 Node.js 中，如果你想要加载 CSS3 字体文件（如 .woff, .ttf 等），你需要设置静态文件服务来处理这些请求。虽然你可以通过检查 URL 的后缀名来处理不同的资源类型，但使用专门的中间件会更加高效且易于维护。

以下是一个简单的示例，展示如何在不使用 Express 框架的情况下，使用 Node.js 原生的 http 和 fs 模块来实现这一功能。

示例代码

const http = require('http');
const fs = require('fs');
const path = require('path');

// 创建 HTTP 服务器
const server = http.createServer((req, res) => {
    // 解析请求路径
    const url = req.url;
    const filePath = path.join(__dirname, url);

    // 设置默认文件
    if (url === '/') {
        filePath = path.join(filePath, 'index.html');
    }

    // 读取文件
    fs.readFile(filePath, (err, data) => {
        if (err) {
            console.error(err);
            res.writeHead(404, { 'Content-Type': 'text/plain' });
            res.end('Not Found');
            return;
        }

        // 根据文件扩展名设置 Content-Type
        let contentType;
        switch (path.extname(filePath)) {
            case '.html':
                contentType = 'text/html';
                break;
            case '.css':
                contentType = 'text/css';
                break;
            case '.js':
                contentType = 'application/javascript';
                break;
            case '.woff':
            case '.woff2':
                contentType = 'font/woff';
                break;
            case '.ttf':
                contentType = 'font/ttf';
                break;
            default:
                contentType = 'application/octet-stream';
        }

        // 发送响应头
        res.writeHead(200, { 'Content-Type': contentType });

        // 发送文件内容
        res.end(data);
    });
});

// 监听端口
server.listen(3000, () => {
    console.log('Server is running on port 3000');
});

解释

  1. 创建 HTTP 服务器：使用 http.createServer() 创建一个 HTTP 服务器。
  2. 解析请求路径：使用 url.parse(req.url).pathname 获取请求路径，并根据需要设置默认文件（例如根目录下的 index.html）。
  3. 读取文件：使用 fs.readFile() 读取文件内容。
  4. 设置响应头：根据文件扩展名设置相应的 Content-Type，确保浏览器能够正确解析字体文件。
  5. 发送响应：使用 res.writeHead() 和 res.end() 发送响应头和文件内容。

通过这种方式，你可以确保 CSS3 字体文件能够被正确加载并应用于你的页面。希望这对你有所帮助！


问题已经解决了，谢谢 https://github.com/broofa/node-mime/blob/master/types/mime.types

要在Node.js中正确加载CSS3字体文件（如.woff, .ttf等），你需要确保你的服务器能够正确处理这些静态资源的请求。以下是如何实现这一目标的一个简单示例。

示例代码

  1. 创建一个简单的HTTP服务器
const http = require('http');
const fs = require('fs');
const path = require('path');

const server = http.createServer((req, res) => {
    const filePath = '.' + req.url;
    if (filePath === './') filePath = './index.html'; // 默认返回首页

    const extname = String(path.extname(filePath)).toLowerCase();
    const mimeTypes = {
        '.html': 'text/html',
        '.js': 'text/javascript',
        '.css': 'text/css',
        '.json': 'application/json',
        '.png': 'image/png',
        '.jpg': 'image/jpg',
        '.gif': 'image/gif',
        '.svg': 'image/svg+xml',
        '.woff': 'application/font-woff',
        '.ttf': 'application/font-ttf',
        '.eot': 'application/vnd.ms-fontobject',
        '.otf': 'application/font-otf',
        '.wasm': 'application/wasm'
    };

    const contentType = mimeTypes[extname] || 'application/octet-stream';

    fs.readFile(filePath, (err, content) => {
        if (err) {
            if (err.code == 'ENOENT') {
                fs.readFile('./404.html', (err, content) => {
                    res.writeHead(404, { 'Content-Type': 'text/html' });
                    res.end(content, 'utf-8');
                });
            } else {
                res.writeHead(500);
                res.end(`Server Error: ${err.code}`);
            }
        } else {
            res.writeHead(200, { 'Content-Type': contentType });
            res.end(content, 'utf-8');
        }
    });
});

server.listen(3000, () => console.log('Server running on port 3000'));

解释

  • 文件路径解析：首先，我们从请求的URL解析出文件路径。
  • MIME类型映射：定义一个映射表来根据文件扩展名确定MIME类型。这一步很重要，因为浏览器需要正确的MIME类型才能正确地渲染不同类型的文件。
  • 读取文件并发送响应：使用fs.readFile读取文件内容，并根据文件的MIME类型设置响应头，然后将文件内容发送给客户端。

CSS3 字体文件

确保你的CSS文件引用字体文件的路径是正确的。例如：

@font-face {
    font-family: 'MyCustomFont';
    src: url('/fonts/myfont.woff') format('woff'),
         url('/fonts/myfont.ttf') format('truetype');
}

确保这些字体文件被放在你的项目目录中的适当位置，比如/public/fonts，并且在HTML文件中正确引用CSS文件。

通过这种方式，你可以确保Node.js服务器能够正确处理CSS3字体文件的请求。

回到顶部