若依 vue Quill插件富文本框，文字大小设置，后台生效，手机端不生效问题

原因，后台设置的样式，并没有加载到手机端而已，未设置情况下，查看Html  class="large-xx-xx"

设置后台之后： style="font-size:64px";

如下是我们需要得到的文字大小和字体的效果:

自定义字体、文字大小JS部分：

//引入Qill插件
import Quill from "quill";

// 自定义字体

let fontFamily = ['宋体', '黑体', '微软雅黑', '楷体', '仿宋', 'Arial', '苹方'];
Quill.imports['attributors/style/font'].whitelist = fontFamily;
Quill.register(Quill.imports['attributors/style/font']);
// 自定义文字大小
let fontSize = ['10px', '12px', '14px', '16px', '20px', '24px', '36px']
Quill.imports['attributors/style/size'].whitelist = fontSize;
Quill.register(Quill.imports['attributors/style/size']);

const toolbarOptions = [
  [
    "bold",
    "italic",
    "underline",
    "strike",
    "blockquote",
    "code-block",
    { header: 1 },
    { header: 2 },
    { list: "ordered" },
    { list: "bullet" },
    { indent: "-1" },
    { indent: "+1" },
    { script: "sub" }, // 下标
    { script: "super" }, // 上标
    { align: [] },
    { color: [] },
    { background: [] },
    "link",
    "image",
  ],
  [{ size: fontSize }], // 文字大小
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
  [{ font: fontFamily }], // 字体
];

自定义字体、文字大小css部分

/*
  文字大小
*/
.ql-snow .ql-picker.ql-size{
  width: 70px;  // 菜单栏占比宽度
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='10px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='10px']::before {
  content: '10px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='12px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='12px']::before {
  content: '12px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='14px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='14px']::before {
  content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='16px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='16px']::before {
  content: '16px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='20px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='20px']::before {
  content: '20px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='24px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='24px']::before {
  content: '24px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='36px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='36px']::before {
  content: '36px';
}

/*
  字体
*/
.ql-snow .ql-picker.ql-font{
  width: 80px;  // 菜单栏占比宽度
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='宋体']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='宋体']::before {
  content: '宋体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='黑体']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='黑体']::before {
  content: '黑体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='微软雅黑']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='微软雅黑']::before {
  content: '微软雅黑';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='楷体']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='楷体']::before {
  content: '楷体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='仿宋']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='仿宋']::before {
  content: '仿宋';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Arial']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Arial']::before {
  content: 'Arial';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='苹方']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='苹方']::before {
  content: '苹方';
}

组件完整代码（含element上传组件功能）：