什么是 mapbox-to-css-font
mapbox-to-css-font 是一个 npm 包，用于将 Mapbox GL JS 的字体符号 ID 转换为 CSS 字体家族及字体文件 URL。
安装
使用 npm 安装：
npm install mapbox-to-css-font
或使用 yarn 安装：
yarn add mapbox-to-css-font
使用方法
- 将转换后的 CSS 字体样式及字体文件存储到本地
const { downloadFonts } = require('mapbox-to-css-font');
const mapboxFontIds = ['DIN Offc Pro Bold', 'DIN Offc Pro Medium'];
const fontBaseUrlTemplate = 'https://<%= domain %>/fonts/v1/{fontstack}/{range}.pbf';
downloadFonts(mapboxFontIds, { outputDir: './fonts', fontBaseUrlTemplate });以上代码将字体符号 ID 为 'DIN Offc Pro Bold' 和 'DIN Offc Pro Medium' 的字体转换为 CSS 样式及字体文件，并存储到 ./fonts 目录。其中，fontBaseUrlTemplate 参数用于指定字体文件 URL 模板，模板参数包括 domain（Mapbox 服务器的域名）、fontstack（字体家族名称）和range（字体范围），详情请参考 Mapbox GL JS 文档。
- 将转换后的 CSS 字体样式及字体文件上传至 CDN
-- -------------------- ---- -------
----- - ---------------- - - ------------------------------
----- ------------- - ----- ---- --- ------ ---- ---- --- ---------
----- ------------------- - ------------ ------ -------------------------------------
----- --------------------- - ---- --------- ----
------------------------------- -
--------------------
----------------------
-------------- -
--------- -----------------------------
-------- -
-------------- ------- ------------
--
--
---以上代码将字体符号 ID 为 'DIN Offc Pro Bold' 和 'DIN Offc Pro Medium' 的字体转换为 CSS 样式及字体文件，并将文件上传至指定的 CDN。其中，cssFontFamilyTemplate 参数用于指定 CSS 字体家族的名称模板，模板参数包括 fontstack（字体家族名称），详情请参考 Mapbox GL JS 文档。
示例
-- -------------------- ---- -------
----- - -------------- ---------------- - - ------------------------------
----- ------------- - ----- ---- --- ------ ---- ---- --- ---------
----- ------------------- - ------------ ------ -------------------------------------
----- --------------------- - ---- --------- ----
----- -------- ------ -
-- --------- --- --
----- ------------- - ----- ---------------------------- - ------------------- ---
-- ------- --- --- --- ----
----- ---------- - ----- ------------------------------- -
--------------------
----------------------
-------------- -
--------- ------------------------------
-------- - -------------- ------- ----------- --
--
---
-- -- --- ------- ---
---------------- ----- ---------------
---------------- ------- ------------
-
-------以上代码将字体符号 ID 为 'DIN Offc Pro Bold' 和 'DIN Offc Pro Medium' 的字体转换为 CSS 样式及字体文件，并将文件上传至指定的 CDN。输出如下：
CSS 样式： font-family: 'DIN Offc Pro Bold', sans-serif; CSS 样式链接： https://your-cdn.com/fonts/DIN%20Offc%20Pro%20Bold.woff2
学习和指导
mapbox-to-css-font 提供了便捷的方式将 Mapbox GL JS 的字体符号 ID 转换为 CSS 字体家族及字体文件 URL，可以方便地为自己的项目中使用 Mapbox 字体提供支持。
通过阅读源码及官方文档，我们可以学习到如何使用 npm 包来简化我们的开发工作，同时也可以了解到 Mapbox GL JS 的字体系统的一些细节及使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067346890c4f72775836e0