diff --git a/src/App.vue b/src/App.vue index 16d0ddcb..394e22c9 100644 --- a/src/App.vue +++ b/src/App.vue @@ -32,7 +32,6 @@ if (import.meta.env.MODE !== 'development') { onMounted(async () => { await deleteDiscardedDB() snapshotStore.initSnapshotDatabase() - mainStore.setAvailableFonts() }) // 应用注销时向 localStorage 中记录下本次 indexedDB 的数据库ID，用于之后清除数据库 diff --git a/src/assets/fonts/AlibabaPuHuiTi.woff2 b/src/assets/fonts/AlibabaPuHuiTi.woff2 new file mode 100644 index 00000000..5514b6ae Binary files /dev/null and b/src/assets/fonts/AlibabaPuHuiTi.woff2 differ diff --git a/src/assets/fonts/仓耳小丸子.woff2 b/src/assets/fonts/CangerXiaowanzi.woff2 similarity index 100% rename from src/assets/fonts/仓耳小丸子.woff2 rename to src/assets/fonts/CangerXiaowanzi.woff2 diff --git a/src/assets/fonts/DeYiHei.woff2 b/src/assets/fonts/DeYiHei.woff2 new file mode 100644 index 00000000..b5956e1c Binary files /dev/null and b/src/assets/fonts/DeYiHei.woff2 differ diff --git a/src/assets/fonts/FangZhengFangSong.woff2 b/src/assets/fonts/FangZhengFangSong.woff2 new file mode 100644 index 00000000..f4a8069a Binary files /dev/null and b/src/assets/fonts/FangZhengFangSong.woff2 differ diff --git a/src/assets/fonts/FangZhengHeiTi.woff2 b/src/assets/fonts/FangZhengHeiTi.woff2 new file mode 100644 index 00000000..49c293b2 Binary files /dev/null and b/src/assets/fonts/FangZhengHeiTi.woff2 differ diff --git a/src/assets/fonts/FangZhengKaiTi.woff2 b/src/assets/fonts/FangZhengKaiTi.woff2 new file mode 100644 index 00000000..aa4fd01c Binary files /dev/null and b/src/assets/fonts/FangZhengKaiTi.woff2 differ diff --git a/src/assets/fonts/FangZhengShuSong.woff2 b/src/assets/fonts/FangZhengShuSong.woff2 new file mode 100644 index 00000000..950438cd Binary files /dev/null and b/src/assets/fonts/FangZhengShuSong.woff2 differ diff --git a/src/assets/fonts/峰广明锐体.woff2 b/src/assets/fonts/FengguangMingrui.woff2 similarity index 100% rename from src/assets/fonts/峰广明锐体.woff2 rename to src/assets/fonts/FengguangMingrui.woff2 diff --git a/src/assets/fonts/LXGWWenKai.woff2 b/src/assets/fonts/LXGWWenKai.woff2 new file mode 100644 index 00000000..2d3cc302 Binary files /dev/null and b/src/assets/fonts/LXGWWenKai.woff2 differ diff --git a/src/assets/fonts/MiSans.woff2 b/src/assets/fonts/MiSans.woff2 new file mode 100644 index 00000000..7544be21 Binary files /dev/null and b/src/assets/fonts/MiSans.woff2 differ diff --git a/src/assets/fonts/锐字真言体.woff2 b/src/assets/fonts/RuiziZhenyan.woff2 similarity index 100% rename from src/assets/fonts/锐字真言体.woff2 rename to src/assets/fonts/RuiziZhenyan.woff2 diff --git a/src/assets/fonts/摄图摩登小方体.woff2 b/src/assets/fonts/ShetuModernSquare.woff2 similarity index 100% rename from src/assets/fonts/摄图摩登小方体.woff2 rename to src/assets/fonts/ShetuModernSquare.woff2 diff --git a/src/assets/fonts/SourceHanSans.woff2 b/src/assets/fonts/SourceHanSans.woff2 new file mode 100644 index 00000000..0cc414b8 Binary files /dev/null and b/src/assets/fonts/SourceHanSans.woff2 differ diff --git a/src/assets/fonts/SourceHanSerif.woff2 b/src/assets/fonts/SourceHanSerif.woff2 new file mode 100644 index 00000000..87e20c42 Binary files /dev/null and b/src/assets/fonts/SourceHanSerif.woff2 differ diff --git a/src/assets/fonts/素材集市酷方体.woff2 b/src/assets/fonts/SucaiJishiCoolSquare.woff2 similarity index 100% rename from src/assets/fonts/素材集市酷方体.woff2 rename to src/assets/fonts/SucaiJishiCoolSquare.woff2 diff --git a/src/assets/fonts/素材集市康康体.woff2 b/src/assets/fonts/SucaiJishiKangkang.woff2 similarity index 100% rename from src/assets/fonts/素材集市康康体.woff2 rename to src/assets/fonts/SucaiJishiKangkang.woff2 diff --git a/src/assets/fonts/途牛类圆体.woff2 b/src/assets/fonts/TuniuRounded.woff2 similarity index 100% rename from src/assets/fonts/途牛类圆体.woff2 rename to src/assets/fonts/TuniuRounded.woff2 diff --git a/src/assets/fonts/WenDingPLKaiTi.woff2 b/src/assets/fonts/WenDingPLKaiTi.woff2 new file mode 100644 index 00000000..958a1525 Binary files /dev/null and b/src/assets/fonts/WenDingPLKaiTi.woff2 differ diff --git a/src/assets/fonts/优设标题黑.woff2 b/src/assets/fonts/YousheTitleBlack.woff2 similarity index 100% rename from src/assets/fonts/优设标题黑.woff2 rename to src/assets/fonts/YousheTitleBlack.woff2 diff --git a/src/assets/fonts/站酷快乐体.woff2 b/src/assets/fonts/ZcoolHappy.woff2 similarity index 100% rename from src/assets/fonts/站酷快乐体.woff2 rename to src/assets/fonts/ZcoolHappy.woff2 diff --git a/src/assets/fonts/ZhuQueFangSong.woff2 b/src/assets/fonts/ZhuQueFangSong.woff2 new file mode 100644 index 00000000..4e69c961 Binary files /dev/null and b/src/assets/fonts/ZhuQueFangSong.woff2 differ diff --git a/src/assets/fonts/字制区喜脉体.woff2 b/src/assets/fonts/ZizhiQuXiMai.woff2 similarity index 100% rename from src/assets/fonts/字制区喜脉体.woff2 rename to src/assets/fonts/ZizhiQuXiMai.woff2 diff --git a/src/assets/fonts/得意黑.woff2 b/src/assets/fonts/得意黑.woff2 deleted file mode 100644 index caf6caad..00000000 Binary files a/src/assets/fonts/得意黑.woff2 and /dev/null differ diff --git a/src/assets/styles/font.scss b/src/assets/styles/font.scss index a1846e50..87401dca 100644 --- a/src/assets/styles/font.scss +++ b/src/assets/styles/font.scss @@ -1,6 +1,6 @@ -$fontList: '仓耳小丸子', '优设标题黑', '字制区喜脉体', '峰广明锐体', '得意黑', '摄图摩登小方体', '站酷快乐体', '素材集市康康体', '素材集市酷方体', '途牛类圆体', '锐字真言体'; +$fonts: 'SourceHanSans', 'SourceHanSerif', 'FangZhengHeiTi', 'FangZhengKaiTi', 'FangZhengShuSong', 'FangZhengFangSong', 'AlibabaPuHuiTi', 'ZhuQueFangSong', 'LXGWWenKai', 'WenDingPLKaiTi', 'DeYiHei', 'MiSans', 'CangerXiaowanzi', 'YousheTitleBlack', 'FengguangMingrui', 'ShetuModernSquare', 'ZcoolHappy', 'ZizhiQuXiMai', 'SucaiJishiKangkang', 'SucaiJishiCoolSquare', 'TuniuRounded', 'RuiziZhenyan'; -@each $font in $fontList { +@each $font in $fonts { @font-face { font-display: swap; font-family: $font; diff --git a/src/assets/styles/prosemirror.scss b/src/assets/styles/prosemirror.scss index 7da8e34f..5bcdf147 100644 --- a/src/assets/styles/prosemirror.scss +++ b/src/assets/styles/prosemirror.scss @@ -2,6 +2,7 @@ outline: 0; border: 0; font-size: 16px; + font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; word-break: break-word; white-space: normal; diff --git a/src/configs/font.ts b/src/configs/font.ts index a8909ea8..08b9cc9f 100644 --- a/src/configs/font.ts +++ b/src/configs/font.ts @@ -1,44 +1,25 @@ -export const SYS_FONTS = [ - { label: 'Arial', value: 'Arial' }, - { label: '微软雅黑', value: 'Microsoft Yahei' }, - { label: '宋体', value: 'SimSun' }, - { label: '黑体', value: 'SimHei' }, - { label: '楷体', value: 'KaiTi' }, - { label: '新宋体', value: 'NSimSun' }, - { label: '仿宋', value: 'FangSong' }, - { label: '苹方', value: 'PingFang SC' }, - { label: '华文黑体', value: 'STHeiti' }, - { label: '华文楷体', value: 'STKaiti' }, - { label: '华文宋体', value: 'STSong' }, - { label: '华文仿宋', value: 'STFangSong' }, - { label: '华文中宋', value: 'STZhongSong' }, - { label: '华文琥珀', value: 'STHupo' }, - { label: '华文新魏', value: 'STXinwei' }, - { label: '华文隶书', value: 'STLiti' }, - { label: '华文行楷', value: 'STXingkai' }, - { label: '冬青黑体', value: 'Hiragino Sans GB' }, - { label: '兰亭黑', value: 'Lantinghei SC' }, - { label: '偏偏体', value: 'Hanzipen SC' }, - { label: '手札体', value: 'Hannotate SC' }, - { label: '宋体', value: 'Songti SC' }, - { label: '娃娃体', value: 'Wawati SC' }, - { label: '行楷', value: 'Xingkai SC' }, - { label: '圆体', value: 'Yuanti SC' }, - { label: '华文细黑', value: 'STXihei' }, - { label: '幼圆', value: 'YouYuan' }, - { label: '隶书', value: 'LiSu' }, -] - -export const WEB_FONTS = [ - { label: '得意黑', value: '得意黑' }, - { label: '仓耳小丸子', value: '仓耳小丸子' }, - { label: '优设标题黑', value: '优设标题黑' }, - { label: '峰广明锐体', value: '峰广明锐体' }, - { label: '摄图摩登小方体', value: '摄图摩登小方体' }, - { label: '站酷快乐体', value: '站酷快乐体' }, - { label: '字制区喜脉体', value: '字制区喜脉体' }, - { label: '素材集市康康体', value: '素材集市康康体' }, - { label: '素材集市酷方体', value: '素材集市酷方体' }, - { label: '途牛类圆体', value: '途牛类圆体' }, - { label: '锐字真言体', value: '锐字真言体' }, +export const FONTS = [ + { label: '默认字体', value: '' }, + { label: '思源黑体', value: 'SourceHanSans' }, + { label: '思源宋体', value: 'SourceHanSerif' }, + { label: '方正黑体', value: 'FangZhengHeiTi' }, + { label: '方正楷体', value: 'FangZhengKaiTi' }, + { label: '方正宋体', value: 'FangZhengShuSong' }, + { label: '方正仿宋', value: 'FangZhengFangSong' }, + { label: '阿里巴巴普惠体', value: 'AlibabaPuHuiTi' }, + { label: '朱雀仿宋', value: 'ZhuqueFangSong' }, + { label: '霞鹜文楷', value: 'LXGWWenKai' }, + { label: '文鼎PL楷体', value: 'WenDingPLKaiTi' }, + { label: '得意黑', value: 'DeYiHei' }, + { label: 'MiSans', value: 'MiSans' }, + { label: '仓耳小丸子', value: 'CangerXiaowanzi' }, + { label: '优设标题黑', value: 'YousheTitleBlack' }, + { label: '峰广明锐体', value: 'FengguangMingrui' }, + { label: '摄图摩登小方体', value: 'ShetuModernSquare' }, + { label: '站酷快乐体', value: 'ZcoolHappy' }, + { label: '字制区喜脉体', value: 'ZizhiQuXiMai' }, + { label: '素材集市康康体', value: 'SucaiJishiKangkang' }, + { label: '素材集市酷方体', value: 'SucaiJishiCoolSquare' }, + { label: '途牛类圆体', value: 'TuniuRounded' }, + { label: '锐字真言体', value: 'RuiziZhenyan' }, ] \ No newline at end of file diff --git a/src/configs/theme.ts b/src/configs/theme.ts index a2938ed8..51b77d98 100644 --- a/src/configs/theme.ts +++ b/src/configs/theme.ts @@ -9,85 +9,85 @@ export const PRESET_THEMES: PresetTheme[] = [ { background: '#ffffff', fontColor: '#333333', - fontname: 'Microsoft Yahei', + fontname: '', colors: ['#5b9bd5', '#ed7d31', '#a5a5a5', '#ffc000', '#4472c4', '#70ad47'], }, { background: '#ffffff', fontColor: '#333333', - fontname: 'Microsoft Yahei', + fontname: '', colors: ['#83992a', '#3c9670', '#44709d', '#a23b32', '#d87728', '#deb340'], }, { background: '#ffffff', fontColor: '#333333', - fontname: 'Microsoft Yahei', + fontname: '', colors: ['#e48312', '#bd582c', '#865640', '#9b8357', '#c2bc80', '#94a088'], }, { background: '#ffffff', fontColor: '#333333', - fontname: 'Microsoft Yahei', + fontname: '', colors: ['#bdc8df', '#003fa9', '#f5ba00', '#ff7567', '#7676d9', '#923ffc'], }, { background: '#ffffff', fontColor: '#333333', - fontname: 'Microsoft Yahei', + fontname: '', colors: ['#90c225', '#54a121', '#e6b91e', '#e86618', '#c42f19', '#918756'], }, { background: '#ffffff', fontColor: '#333333', - fontname: 'Microsoft Yahei', + fontname: '', colors: ['#1cade4', '#2683c6', '#27ced7', '#42ba97', '#3e8853', '#62a39f'], }, { background: '#e9efd6', fontColor: '#333333', - fontname: 'Microsoft Yahei', + fontname: '', colors: ['#a5300f', '#de7e18', '#9f8351', '#728653', '#92aa4c', '#6aac91'], }, { background: '#17444e', fontColor: '#ffffff', - fontname: 'Microsoft Yahei', + fontname: '', colors: ['#b01513', '#ea6312', '#e6b729', '#6bab90', '#55839a', '#9e5d9d'], }, { background: '#36234d', fontColor: '#ffffff', - fontname: 'Microsoft Yahei', + fontname: '', colors: ['#b31166', '#e33d6f', '#e45f3c', '#e9943a', '#9b6bf2', '#d63cd0'], }, { background: '#247fad', fontColor: '#ffffff', - fontname: 'Microsoft Yahei', + fontname: '', colors: ['#052f61', '#a50e82', '#14967c', '#6a9e1f', '#e87d37', '#c62324'], }, { background: '#103f55', fontColor: '#ffffff', - fontname: 'Microsoft Yahei', + fontname: '', colors: ['#40aebd', '#97e8d5', '#a1cf49', '#628f3e', '#f2df3a', '#fcb01c'], }, { background: '#242367', fontColor: '#ffffff', - fontname: 'Microsoft Yahei', + fontname: '', colors: ['#ac3ec1', '#477bd1', '#46b298', '#90ba4c', '#dd9d31', '#e25345'], }, { background: '#e4b75e', fontColor: '#333333', - fontname: 'Microsoft Yahei', + fontname: '', colors: ['#f0a22e', '#a5644e', '#b58b80', '#c3986d', '#a19574', '#c17529'], }, { background: '#333333', fontColor: '#ffffff', - fontname: 'Microsoft Yahei', + fontname: '', colors: ['#bdc8df', '#003fa9', '#f5ba00', '#ff7567', '#7676d9', '#923ffc'], }, ] \ No newline at end of file diff --git a/src/mocks/slides.ts b/src/mocks/slides.ts index 26c2a712..c1c0a276 100644 --- a/src/mocks/slides.ts +++ b/src/mocks/slides.ts @@ -42,7 +42,7 @@ export const slides: Slide[] = [ lineHeight: 1.2, content: '

PPTist

', rotate: 0, - defaultFontName: 'Microsoft Yahei', + defaultFontName: '', defaultColor: '#333' }, { @@ -54,7 +54,7 @@ export const slides: Slide[] = [ height: 56, content: '

基于 Vue 3.x + TypeScript 的在线演示文稿应用

', rotate: 0, - defaultFontName: 'Microsoft Yahei', + defaultFontName: '', defaultColor: '#333' }, { @@ -88,7 +88,7 @@ export const slides: Slide[] = [ lineHeight: 1.2, content: '

在此处添加标题

', rotate: 0, - defaultFontName: 'Microsoft Yahei', + defaultFontName: '', defaultColor: '#333', }, { @@ -100,7 +100,7 @@ export const slides: Slide[] = [ height: 56, content: '

在此处添加副标题

', rotate: 0, - defaultFontName: 'Microsoft Yahei', + defaultFontName: '', defaultColor: '#333', }, { @@ -173,7 +173,7 @@ export const slides: Slide[] = [ height: 140, content: '

感谢观看

', rotate: 0, - defaultFontName: 'Microsoft Yahei', + defaultFontName: '', defaultColor: '#333', wordSpace: 5 } diff --git a/src/mocks/theme.ts b/src/mocks/theme.ts index 8749f692..af9f0ba8 100644 --- a/src/mocks/theme.ts +++ b/src/mocks/theme.ts @@ -3,7 +3,7 @@ import type { SlideTheme } from '@/types/slides' export const theme: SlideTheme = { themeColor: '#5b9bd5', fontColor: '#333', - fontName: 'Microsoft Yahei', + fontName: '', backgroundColor: '#fff', shadow: { h: 3, diff --git a/src/store/main.ts b/src/store/main.ts index 575f9d8e..3ee95b07 100644 --- a/src/store/main.ts +++ b/src/store/main.ts @@ -4,8 +4,6 @@ import { ToolbarStates } from '@/types/toolbar' import type { CreatingElement, ShapeFormatPainter, TextFormatPainter } from '@/types/edit' import type { DialogForExportTypes } from '@/types/export' import { type TextAttrs, defaultRichTextAttrs } from '@/utils/prosemirror/utils' -import { SYS_FONTS } from '@/configs/font' -import { isSupportFont } from '@/utils/font' import { useSlidesStore } from './slides' @@ -24,7 +22,6 @@ export interface MainState { showRuler: boolean creatingElement: CreatingElement | null creatingCustomShape: boolean - availableFonts: typeof SYS_FONTS toolbarState: ToolbarStates clipingImageElementId: string isScaling: boolean @@ -60,7 +57,6 @@ export const useMainStore = defineStore('main', { showRuler: false, // 显示标尺 creatingElement: null, // 正在插入的元素信息，需要通过绘制插入的元素（文字、形状、线条） creatingCustomShape: false, // 正在绘制任意多边形 - availableFonts: SYS_FONTS, // 当前环境可用字体 toolbarState: ToolbarStates.SLIDE_DESIGN, // 右侧工具栏状态 clipingImageElementId: '', // 当前正在裁剪的图片ID richTextAttrs: defaultRichTextAttrs, // 富文本状态 @@ -153,10 +149,6 @@ export const useMainStore = defineStore('main', { this.creatingCustomShape = state }, - setAvailableFonts() { - this.availableFonts = SYS_FONTS.filter(font => isSupportFont(font.value)) - }, - setToolbarState(toolbarState: ToolbarStates) { this.toolbarState = toolbarState }, diff --git a/src/utils/font.ts b/src/utils/font.ts deleted file mode 100644 index fa2b8bb5..00000000 --- a/src/utils/font.ts +++ /dev/null @@ -1,36 +0,0 @@ -/** - * 判断操作系统是否存在某字体 - * @param fontName 字体名 - */ -export const isSupportFont = (fontName: string) => { - if (typeof fontName !== 'string') return false - - const arial = 'Arial' - if (fontName.toLowerCase() === arial.toLowerCase()) return true - - const size = 100 - const width = 100 - const height = 100 - const str = 'a' - - const canvas = document.createElement('canvas') - const ctx = canvas.getContext('2d', { willReadFrequently: true }) - - if (!ctx) return false - - canvas.width = width - canvas.height = height - ctx.textAlign = 'center' - ctx.fillStyle = 'black' - ctx.textBaseline = 'middle' - - const getDotArray = (_fontFamily: string) => { - ctx.clearRect(0, 0, width, height) - ctx.font = `${size}px ${_fontFamily}, ${arial}` - ctx.fillText(str, width / 2, height / 2) - const imageData = ctx.getImageData(0, 0, width, height).data - return [].slice.call(imageData).filter(item => item !== 0) - } - - return getDotArray(arial).join('') !== getDotArray(fontName).join('') -} \ No newline at end of file diff --git a/src/utils/prosemirror/utils.ts b/src/utils/prosemirror/utils.ts index eb7117bf..ce1f06da 100644 --- a/src/utils/prosemirror/utils.ts +++ b/src/utils/prosemirror/utils.ts @@ -187,7 +187,7 @@ const _defaultAttrs: DefaultAttrs = { color: '#000000', backcolor: '', fontsize: '16px', - fontname: '微软雅黑', + fontname: '', align: 'left', } export const getTextAttrs = (view: EditorView, attrs: Partial = {}) => { @@ -251,7 +251,7 @@ export const defaultRichTextAttrs: TextAttrs = { color: '#000000', backcolor: '', fontsize: '16px', - fontname: '微软雅黑', + fontname: '', link: '', align: 'left', bulletList: false, diff --git a/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue index baa9a8b5..2cf59d79 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue +++ b/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue @@ -58,10 +58,7 @@ search searchLabel="搜索字体" @update:value="value => updateFontStyle('fontname', value as string)" - :options="[ - ...availableFonts, - ...WEB_FONTS - ]" + :options="FONTS" >