Phantom JS + Docker：HTML转图片时font-family不生效问题求助

这个问题其实很好理解——你本地Windows系统自带了Comic Sans MS这类微软字体，PhantomJS渲染时能直接找到；但Docker容器用的是基于Linux的Node镜像，默认没有这些Windows专属字体，找不到指定字体时就会自动 fallback 到系统默认字体。下面给你两个实用的解决办法：

方案一：在Docker容器中安装所需字体 #

Node官方镜像基于Debian系统，我们可以直接在Dockerfile中安装微软核心字体包，步骤如下：

1. 修改你的Dockerfile，添加字体安装和缓存刷新逻辑：

FROM node:latest
WORKDIR /app

# 预先同意微软字体安装协议（实现非交互安装）
RUN echo ttf-mscorefonts-installer msttcorefonts/accepted-mscorefonts-eula select true | debconf-set-selections

# 安装字体依赖和微软核心字体包
RUN apt-get update && apt-get install -y --no-install-recommends \
    fontconfig \
    ttf-mscorefonts-installer \
    && rm -rf /var/lib/apt/lists/*

# 刷新字体缓存，让系统识别新安装的字体
RUN fc-cache -fv

COPY package.json /app
RUN npm install
COPY . /app
CMD node app.js
EXPOSE 8081

2. 重新构建并运行Docker镜像：

docker build -t htmlconverter .
docker run -p 8081:8081 htmlconverter

完成后容器里就会包含Comic Sans MS等微软字体，PhantomJS渲染时就能正常调用了。

方案二：在HTML中嵌入自定义字体（更通用） #

如果不想依赖容器的系统字体，或者需要使用特殊小众字体，直接在HTML中通过@font-face嵌入字体文件是更可靠的方式，不受运行环境限制：

1. 把你需要的字体文件（比如comic.ttf）放到项目根目录下的fonts文件夹中。
2. 修改请求的HTML内容，添加@font-face定义：

<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
    font-family: 'Comic Sans MS';
    src: url('/fonts/comic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
body {background-color: powderblue; font-family: 'Comic Sans MS';}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

3. 在app.js中添加静态文件服务，让PhantomJS能访问到字体文件：

// 在bodyParser配置之后添加这段代码
app.use('/fonts', express.static(__dirname + '/fonts'));

4. 因为你的Dockerfile用了COPY . /app，只要fonts目录在项目根目录下就会被自动复制，重新构建运行容器即可生效。

两种方案都能解决问题：方案一适合依赖系统自带字体的场景，方案二更灵活，适合自定义或特殊字体的需求。

内容的提问来源于stack exchange，提问作者David Aranovsky