框架:vue-cli3 element-ui版本:"^2.8.2" 问题: 打包放到服务器上后,在ie中和以ie为内核的浏览器(例360兼容模式)下不能正常显示icon图标,且控制台报错 “@font-face 未能完成 OpenType 嵌入权限检查。权限必须是可安装的。” 首先,font-face是css3的字体规则,对于浏览器的支持情况如下图 在项... ...
权限必须是可安装的 vue-cli3.x引用element-ui框架后,在IE中报错:@font-face 未能完成 OpenType 嵌入权限检查。权限必须是可安装的。 后来仔细查了一下是icon字体在ie下支持程度的问题。 浏览器font-face支持 这是我们在查一下element-ui的源码样式,你会发现只有.woff和.ttf两种类型的字体,没有.eot类型的字体 ...
理论知识有了,现在我们来实际操作一下:文件名带hash的(即css、js、font和img目录下的所有文件)设置一个月缓存,浏览器可以直接使用缓存不需要请求服务器。其他的文件(index.html和static目录下的文件)设置为no-cache,即每次都来服务器检查是否最新。 为什么缓存时间是一个月,刚才不是说设置一年?设置为一年,当然没有...
@font-face { font-family: "HYXJ"; src: url("./TaipeiSansTCBeta-Regular.ttf") format("truetype"); } .HYXJ { font-family: "HYXJ" !important; font-size: 16px; font-weight: 800; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } 使用:...
$browser-font-path:'@shared/fonts'; @font-face { font-display: auto; font-family:'test'; font-style: normal; font-weight:400;src:url('#{$browser-font-path}/test.eot');src:url('#{$browser-font-path}/test.eot?#iefix')format('embedded-opentype'),url('#{$browser-font-...
然后,在全局样式文件中使用@font-face规则来定义和引入自定义字体。 css /* src/assets/styles/global.css */ @font-face { font-family: 'MyCustomFont'; src: url('@/assets/fonts/my-custom-font.woff2') format('woff2'), url('@/assets/fonts/my-custom-font.woff') format('woff'); font-...
<template><div><div class="iconfont"> </div>JueJin</div></template><style lang="scss">.iconfont{font-size: 100px;}</style>复制代码 是在iconfont项目中复制过来的。 iconfont样式名是在iconfont.css中@font-face定义的font-family名称。
/* 声明字体*/ @font-face { font-family: electronicFont; src: url(../font/DS-DIGIT.TTF); } .no { background: rgba(101, 132, 226, 0.1); padding: 0.1875rem; .no-hd { position: relative; border: 1px solid rgba(25, 186, 139, 0.17); &::before { content: ""; position: absolu...
gulp.task('move-font', function() { return gulp.src(['./theme/fonts/**']).pipe(gulp.dest('dist/fonts')); }); gulp.task('default',['css-wrap','move-font']); 复制代码 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11.