vue中font-family

### 如何在 Vue 项目中配置和使用 `font-family` 样式 #### 配置自定义字体 为了在 Vue 项目中成功应用自定义的 `font-family`，可以按照以下方法操作： 1. **通过 `@font-face` 定义字体** 在项目的全局样式文件（如 `src/assets/styles/global.css` 或其他指定的 SCSS 文件）中，可以通过 `@font-face` 来加载外部字体文件。例如： ```css @font-face { font-family: 'YouSheBiaoTiHei'; src: url('../fonts/YouSheBiaoTiHei-2.ttf') format('truetype'); } ``` 这里需要注意的是，路径应相对于 CSS 文件的位置来书写[^2]。 2. **确保字体文件被正确引入到项目中** 字体文件通常存放在 `public/fonts` 或 `src/assets/fonts` 目录下。如果使用 Webpack 构建工具，则需确认其能够解析 `.ttf`, `.woff`, 和其他字体格式文件。可以在 `webpack.config.js` 中添加如下规则以支持这些资源类型的处理： ```javascript module.exports = { module: { rules: [ { test: /\.(woff|woff2|eot|ttf|otf)$/i, type: 'asset/resource', }, ], }, }; ``` 3. **将新定义的字体应用于组件或页面** 接下来，在需要的地方声明该字体族作为默认字体或者特定样式的属性之一。比如在一个通用类名上设置它以便于复用： ```css body, html { margin: 0; padding: 0; font-family: 'YouSheBiaoTiHei', Arial, sans-serif !important; } .customText { font-family: 'YouSheBiaoTiHei' !important; } ``` 4. **针对富文本编辑器 vue-quill-editor 的特殊处理** 如果您正在使用的插件是 `vue-quill-editor` 并希望其中也显示上述新增加的字体选项，那么还需要额外注册它们至 Quill 编辑器内部可用列表当中去。具体做法如下所示： ```javascript import Quill from 'quill'; const Font = Quill.import('formats/font'); // 添加更多字体名称到这里... let customFonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong']; Font.whitelist = [...Font.whitelist, ...customFonts]; Quill.register(Font); export default { mounted() { this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('font', function(value) {}); } }; ``` 同时记得更新模板部分的相关绑定关系以及初始化参数传递给 quill 实例对象。 ```html <template> <div id="app"> <!-- Other elements --> <vue-quill-editor ref="myQuillEditor"></vue-quill-editor> </div> </template> <script> import VueQuillEditor from 'vue-quill-editor' ... </script> ``` #### 注意事项 当遇到某些浏览器无法正常渲染所选字体的情况时，请尝试调整 URL 路径指向绝对地址而非相对位置；另外还需验证服务器端是否允许跨域请求访问静态资源文件夹下的内容。 ---