vue大屏字体问题

Question

大家都知道，大屏展示为了更好看，往往都会引入特殊字体文件，但涉及到汉子字体的话，字体文件会比较大。网上说的通过spider压缩字体，但并不能动态压缩，所以想问下大家都是怎么处理字体的？
比如字体文件：思源黑体

Answer 1

可以服务端跑一个接口,接受汉字,返回从字体包中拆出的字体.
参考我这个DEMO

浏览器端:

@font-face {
    font-family: "my-font";
    src: url('/font?str=天地玄黄宇宙洪荒') format('truetype');
}

<p style="font-family: 'my-font'">天地玄黄 宇宙洪荒</p>

服务端(nodejs)

// route.js
var express = require("express");
var router = express.Router();
const font = require("../src/font");

/* GET home page. */
router.get("/", function (req, res, next) {
  res.render("index", {title: "Express"});
});

router.get("/font", async function (req, res, next) {
  if (!req.query.str) {
    res.send("str is required!");
    return;
  }
  const result = await font.format(req.query.str);
  if (!result.success) {
    res.send("format failed!");
    return;
  }
  res.send(result.data);
});

module.exports = router;

// font.js
const Fontmin = require("fontmin");
const format = (text) => {
  return new Promise(resolve => {
    const fontmin = new Fontmin()
      .src("assets/font.ttf")
      .use(Fontmin.glyph({
        text,
        hinting: false,
      }));

    fontmin.run((err, data) => {
      if (err) {
        console.log("error", err);
        resolve({success: false, data: err});
        return;
      }
      resolve({success: true, data: data[0]._contents});
    });
  });
};


module.exports = {
  format
};

Answer 2

我可以负责任的告诉你，没办法，只能使用系统相似的默认字体，比如字宽一致等来保证页面效果一致，然后就是和楼上说的一下按需加载，提示用户是否需要下载字体，引导用户安装或者自动安装