无法使用 Chrome 加载 @font-face，jquery 出错？

Posted 2023-05-08

【中文标题】无法使用 Chrome 加载 @font-face，jquery 出错？

【英文标题】：Unable to load @font-face with Chrome, error with jquery?

【发布时间】：2018-11-21 09:06:40

【问题描述】：

尝试在 Chrome 中加载 @font-face，未经其他浏览器测试。

@font-face 
font-family: titleFont;
src: url('/fonts/VanadineBold.ttf') format("truetype");
/*Have also tried...*/
/*src: url('/fonts/VanadineBold.woff') format("woff");*/
/*src: url('/fonts/VanadineBold.woff2') format("woff2");*/
font-weight: normal;
font-style: normal;


p#title 
font-family: titleFont, sans-serif;
position: absolute;
top: 5%;
left: 50%;
transform: translate(-50%, -50%);

继续将字体加载为无衬线字体，并在控制台中抛出此错误..？

jquery.min.js:2 GET http://localhost:63342/fonts/VanadineBold.ttf 404 (Not Found)

这是我的文件夹结构...

根文件夹：

在字体文件夹中：

【问题讨论】：

您的 src 位置是否正确？你能包括你的项目结构吗？特别是显示你的字体目录。

是的，没错，index.html 文件夹gyazo.com/94d5499837a8845666dfe4d167642d45 fonts 文件夹gyazo.com/161f63b099a5ada63b1b1991336601a2

这在 FireFox 中正确加载？

未经火狐测试，仅用谷歌浏览器测试，所以不确定是浏览器问题还是什么。

我认为这条路径不正确：localhost:63342/fonts/VanadineBold.ttf。可以是这样的吗？ localhost:63342/YOURSITE/fonts/VanadineBold.ttf?

【参考方案1】：

看this document，format('truetype') 似乎是为 Safari 准备的。

@font-face 
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, android, ios */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */

尝试为 chrome 使用 .woff 字体：

src: url('webfont.woff') format('woff')

【讨论】：

将类型转换为woff2还是不行（显然也改了代码），同样的jquery错误还是弹出来。

也许尝试用你的新代码更新问题。可以改善您的项目结构照片（显示字体文件夹中的字体）......并向我们展示您的项目结构的根（如果它不在现有图像中。）

刚刚更新了帖子，添加了更多图片和代码尝试也更新了。