vue 全局使用字体

vue 全局使用字体 引入字体 在 src/assets/fonts/目录下添加字体文件，如：DIN_Alternate_Bold.ttf,并且同级新建 font.css 内容如下:

css /_ 阿里巴巴字体图标 / @font-face { font-family: 'iconfont'; / Project id 4683425 _/ src: url('./font_4683425_5cunxidjme2.woff2') format('woff2'), url('./font_4683425_5cunxidjme2.woff2') format('woff'), url('./font_4683425_5cunxidjme2.ttf') format('truetype'); }

/_ 对阿里巴巴字体图标全局定义使用 _/ .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/_ 自定义字体引入使用 _/ @font-face { font-family: "Alternate"; src: url('./DIN_Alternate_Bold.ttf'); font-weight: normal; font-style: normal; padding: 0; margin: 0; } @font-face { font-family: "Condensed"; src: url('./DIN_Condensed_Bold.ttf'); font-weight: normal; font-style: normal; padding: 0; margin: 0; }

@font-face { font-family: "PlusJakartaSansBold"; src: url('./PlusJakartaSans-Bold.ttf'); font-weight: normal; font-style: normal; padding: 0; margin: 0; }

@font-face { font-family: "PlusJakartaSansLight"; src: url('./PlusJakartaSans-Light.ttf'); font-weight: normal; font-style: normal; padding: 0; margin: 0; } @font-face { font-family: "PlusJakartaSansMedium"; src: url('./PlusJakartaSans-Medium.ttf'); font-weight: normal; font-style: normal; padding: 0; margin: 0; } @font-face { font-family: "PlusJakartaSansRegular"; src: url('./PlusJakartaSans-Regular.ttf'); font-weight: normal; font-style: normal; padding: 0; margin: 0; }

.dinAlternateBold { font-family: Alternate; } .dinCondensedBold { font-family: Condensed; } .plusJakartaSansMedium{ font-family: PlusJakartaSansMedium; } .PlusJakartaSansBold{ font-family: PlusJakartaSansBold; } .PlusJakartaSansRegular{ font-family: PlusJakartaSansRegular; } 全局引入项目 在 src/main.js 中引入字体文件，如下：

js import '@/assets/fonts/font.css' 在.vue 文件中使用 css