腾讯云云函数(SCF)在云函数中使用自定义字体-云淘科技

应用场景

通过在云函数中使用 Puppeteer，可按需完成针对特定网页的截图、保存、录屏、生成 PDF 等操作。该功能延续了云函数按需拉起的特性，在需要时才去实际启动实例执行，无需使用虚拟机或容器去持续运行服务，方便封装为通用能力。云函数的运行环境目前仅内置了单一字体，本文提供在云函数中使用自定义字体的最佳实践来解决单一字体不能满足定制化需求的问题。本文以 Node.js 16.13 使用文泉驿正黑体为例，介绍如何在 SCF 中使用自定义字体。

前提条件

需要准备好对应自定义字体文件。如文泉驿正黑体字体文件 WenQuanZhengHei-1.ttf。

整体流程

1. 将字体文件放在函数代码的指定目录下。2. 通过设置字体文件配置文件 fonts.config，使其可以加载 1 中指定目录下的字体文件。3. 通过设置 SCF 环境变量 XDG_CONFIG_HOME，指定字体配置文件的加载路径。

操作步骤

1. 在函数代码根目录下创建文件夹fonts，将提前准备好的字体文件放在该目录下。2. 在函数代码根目录下创建文件夹fontconfig，在该目录下创建字体配置文件fonts.conf，fonts.conf 内容如下：注意第 27 行中的 /var/user/fonts 即为步骤 1 中创建的 fonts 文件夹在 SCF 环境下的路径。


<!--    DO NOT EDIT THIS FILE.    IT WILL BE REPLACED WHEN FONTCONFIG IS UPDATED.    LOCAL CHANGES BELONG IN 'local.conf'.
    The intent of this standard configuration file is to be adequate for    most environments.  If you have a reasonably normal environment and    have found problems with this configuration, they are probably    things that others will also want fixed.  Please submit any    problems to the fontconfig bugzilla system located at fontconfig.org
    Note that the normal 'make install' procedure for fontconfig is to    replace any existing fonts.conf file with the new version.  Place    any local customizations in local.conf which this file references.
    Keith Packard-->

    /usr/share/fonts    /var/user/fonts    /usr/share/X11/fonts/Type1 /usr/share/X11/fonts/TTF /usr/local/share/fonts    fonts        ~/.fonts
                        mono                            monospace            
                        sans serif                            sans-serif            
                        sans                            sans-serif            
    /etc/fonts/conf.d

    /var/cache/fontconfig    fontconfig        ~/.fontconfig
                        0x0020	            0x00A0	            0x00AD	            0x034F	            0x0600	            0x0601	            0x0602	            0x0603	            0x06DD	            0x070F	            0x115F	            0x1160	            0x1680	            0x17B4	            0x17B5	            0x180E	            0x2000	            0x2001	            0x2002	            0x2003	            0x2004	            0x2005	            0x2006	            0x2007	            0x2008	            0x2009	            0x200A	            0x200B	            0x200C	            0x200D	            0x200E	            0x200F	            0x2028	            0x2029	            0x202A	            0x202B	            0x202C	            0x202D	            0x202E	            0x202F	            0x205F	            0x2060	            0x2061	            0x2062	            0x2063	            0x206A	            0x206B	            0x206C	            0x206D	            0x206E	            0x206F	            0x2800	            0x3000	            0x3164	            0xFEFF	            0xFFA0	            0xFFF9	            0xFFFA	            0xFFFB	                            30            

步骤 1、2 完成后，函数代码目录结构如下：

├── 函数代码文件（如 index.js、app.js） ├── fonts   |   └── WenQuanZhengHei-1.ttf├── fontconfig|   └── fonts.conf

3. 将函数代码打包为 zip 格式，选择“本地上传 zip 包”，创建函数或者更新函数代码，上传完成后单击部署完成云端函数代码的更新。注意函数代码打包时是将代码根目录下全部文件进行打包，即上述文件结构中的全部文件，不需要打包外层文件夹。

4. 编辑函数环境变量，添加环境变量后，单击保存完成配置更新。key：XDG_CONFIG_HOMEvalue：/var/user


5. 验证字体是否添加成功。Node.js 环境下，使用font-list库，可以打印出环境中支持的字体。完成上述配置后，可以看到环境中已经成功加载了文泉驿正黑体。

var fontList = require('font-list')console.log(await fontList.getFonts()) //打印环境中支持的字体




镜像部署函数也可以采用如下方式实现自定义字体。以在镜像内包装 Chrome、Puppeteer 以及自身所需的字体文件，构筑成镜像，并使用此镜像来部署函数为例。操作步骤如下：

1. 编写 dockerfile

下文向您提供一个简单的、通过 alpine 基础镜像来构筑包含了 chrome 和 puppeteer 的镜像构建文件，文件可以命名为 mypuppeteer.dockerfile。示例如下：

FROM alpine
# Installs latest Chromium (92) package.RUN apk add --no-cache \      chromium \      nss \      freetype \      harfbuzz \      ca-certificates \      ttf-freefont \      nodejs \      yarn

# Tell Puppeteer to skip installing Chrome. We'll be using the installed package.ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true \    PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser
# Puppeteer v10.0.0 works with Chromium 92.RUN yarn add puppeteer@10.0.0
# 添加 cjk 字体以支持中文COPY NotoSansCJK.ttc  /usr/share/fonts/TTF

注意代码中所使用的 字体文件，需要下载放置到 docker file 所在的相同目录。本文仅提供示例，您可以根据实际情况选择字体文件，调整文件名及 docker file 中对应字段。

2. 镜像构建

通过如下命令可以完成镜像构建，将构建出名称为 mypuppeteer:v1 的镜像：

docker build -t mypuppeteer:v1 -f mypuppeteer.dockerfile .

3. 本地测试

本地镜像构建完成后，可以使用如下 test.js 脚本快速测试验证效果。您可通过脚本针对网页截图并保存。

const puppeteer = require('puppeteer');(async () => {  const browser = await puppeteer.launch({    executablePath: '/usr/bin/chromium-browser',    args: ['--no-sandbox','--disable-setuid-sandbox','--ignore-certificate-errors'],    defaultViewport: {        width: 1920,        height: 1080,        deviceScaleFactor: 3,      },  });  const page = await browser.newPage();  await page.goto('https://www.baidu.com');  await page.screenshot({path: '/home/test.png'});  await browser.close();})();

执行以下命令运行镜像，将测试脚本目录挂载到容器内并运行，同时截屏文件也将生成在此目录下。

docker run -it --rm -v $(pwd):/home mypuppeteer:v1 node /home/test.js

您可以通过查看是否输出截屏文件，以验证字体文件是否生效。

4. 后续操作

可以运行 chrome、puppeteer 的镜像构建完成后，您可以基于此镜像之上构建函数运行环境，并通过将镜像 push 到腾讯云的镜像仓库，利用云函数的自定义镜像部署能力构筑自身所需的业务。
云函数的自定义镜像部署的说明及使用方法详情见 使用镜像部署函数功能说明。

常见问题

报错 “font-list 模块找不到”怎么处理？

您可以按以下步骤安装相关模块：

cd src

npm install font-list



官网1折活动，限时活动，即将结束，速速收藏
同尘科技为腾讯云授权服务中心。
购买腾讯云产品享受折上折，更有现金返利。同意关联立享优惠