如何将用户输入的名称转成艺术字体-fontmin.js

写在开头

日常我们在页面中使用特殊字体,一般操作都是直接由前端来全量引入设计师提供的整个字体包即可,具体操作如下:

javascript 复制代码
<template>
  <div class="font">橙某人</div>
</template>

<style scoped>
@font-face {
  font-family: "orange";
  src: url("./orange.ttf");
}
.font {
  font-family: "orange";
}
</style>

很简单吧🤡,但有时应用场景不同,可能需要我们考虑一下性能问题。

一般来说,我们常见的字体包整个是非常大的,小的有几M到十几M,大的可能去到上百M都有,特别是中文类的字体包会相对英文类的要更大一些。

如本文案例,我们仅需在用户输入完后加载对应的字体包即可,这样能避免性能的损耗。

为此,我们需要把整个字体包拆分、细致化、子集化,让它能达到按需引入的效果。

那么这要如何来做这个事情呢?这个方案单单前端可做不了,我们需要配合后端一起,下面就来看看具体的实现过程吧。😗

前端

前端小编用 Vue 来编写,具体如下:

javascript 复制代码
<template>
  <div>
    <input v-model="name" />
    <button @click="handleClick">生成</button>
    <div v-if="showName" class="font">{{ showName }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      showName: "",
    };
  },
  methods: {
    handleClick() {
      // 创建link标签
      const linkElement = document.createElement("link");
      linkElement.setAttribute("rel", "stylesheet");
      linkElement.setAttribute("type", "text/css");
      linkElement.href = `http://localhost:3000?name=${encodeURIComponent(this.name)}`;
      document.body.appendChild(linkElement);
      // 优化显示效果
      setTimeout(() => {
        this.showName = this.name;
      }, 300);
    },
  },
};
</script>

<style>
.font {
  font-family: orange;
  font-size: 50px;
}
</style>

应该都能看懂吧,主要就是生成了一个 <link /> 标签并插入到文档中,标签的请求地址指向我们服务端,至于服务端会返回什么你可以先猜一猜。👻

服务端

服务端小编选择用 Koa2 来编写,你也可以选择 Express 或者 Egg ,甚至 Node 也是可以的,差异不大,具体逻辑如下:

javascript 复制代码
const koa = require("koa2");
const fs = require("fs");
const FontMin = require("fontmin");

const app = new koa();

/** @name 优化,缓存已经加载过的字体包进内存 **/
const fontFamilyMap = {};

/** @name 加载字体包 **/
function loadFontLibrary(fontPath, fontFamily) {
  if (fontFamilyMap[fontFamily]) return fontFamilyMap[fontFamily];
  return new Promise((resolve, reject) => {
    fs.readFile(fontPath, (error, file) => {
        if (error) {
          reject(new Error(error.message));
        } else {
          fontFamilyMap[fontFamily] = file;
          resolve(file);
        }
    });
  });
}

app.use(async (ctx) => {
  const { name } = ctx.query;
  // 设置返回文件类型
  ctx.set("Content-Type", "text/css");

  const fontPath = "./font/orange.ttf";
  const fontFamily = "orange";
  if (!fs.existsSync(fontPath)) return (ctx.body = "字体包读取失败");

  const fontMin = new FontMin();
  const fontFile = await loadFontLibrary(fontPath, fontFamily);
  fontMin.src(fontFile);

  const getFontCSS = () => {
    return new Promise((resolve) => {
      fontMin
        .use(FontMin.glyph({ text: name }))
        .use(FontMin.css({ base64: true, fontFamily }))
        .run((error, files) => {
          if (error) {
            console.log("error", error.message);
          } else {
            const fontContent = files?.[1]?.contents;
            resolve(fontContent);
          }
      });
    });
  };

  const fontCSS = await getFontCSS();

  ctx.body = fontCSS;
});

app.listen(3000);

console.log("服务器开启: http://localhost:3000/");

我们主要是采用了 Fontmin 库来完成整个字体包的按需加载功能,这个库是第一个纯 JavaScript 字体子集化方案。

可能有后端是 Java 或者其他技术栈的小伙伴,你们也不用担心,据小编和公司后端同事了解,不同技术栈也是有对应的库可以解决的,需要的可以自行查查看。


至此,本篇文章就写完啦,撒花撒花。

希望本文对你有所帮助,如有任何疑问,期待你的留言哦。

老样子,点赞+评论=你会了,收藏=你精通了。

相关推荐
中微子6 分钟前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina10 分钟前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路1 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说1 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409191 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding2 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜2 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD2 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding2 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空2 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui