@font-face {
font-family: NotoSansJP;
src: url('~@/assets/font/NotoSansJP.ttf') format('ttf');
}
在edge浏览器中不生效
还有其他方法可以让他生效吗
参考GPT和自己的思路:对于这个问题,有一个常见的解决方法是为字体添加不同的格式,如woff、woff2等,以便在各种浏览器上正确地加载。可以在@font-face
中添加多个src
属性来指示可用的字体格式。例如:
@font-face {
font-family: "NotoSansJP";
src: url('~@/assets/font/NotoSansJP.woff2') format('woff2'),
url('~@/assets/font/NotoSansJP.woff') format('woff'),
url('~@/assets/font/NotoSansJP.ttf') format('truetype');
}
此外,还应该检查是否从正确的文件路径加载字体文件。可以使用浏览器的开发者工具检查是否有任何错误或加载失败的情况。
如果问题仍然存在,请考虑使用Web字体服务器或CDN来确保字体可用性和正确性。
参考GPT和自己的思路:在Edge浏览器中,可能因为安全策略的限制导致@font-face生效问题。你可以尝试以下方法以解决这个问题:
检查跨域资源共享(CORS)设置。在Edge浏览器中,可能需要设置Access-Control-Allow-Origin:*或者明确指定域名。确保服务端正确设置CORS响应头。
尝试使用其他格式的字体文件(例如.woff或.woff2)替换当前的.ttf文件。
在CSS中添加字体格式声明,以确保Edge浏览器正确解析字体文件。例如:
@font-face {
font-family: NotoSansJP;
src: url('~@/assets/font/NotoSansJP.ttf') format('truetype'),
url('~@/assets/font/NotoSansJP.woff') format('woff'),
url('~@/assets/font/NotoSansJP.woff2') format('woff2');
}
希望以上方法能对您有所帮助!