@ font-face chrome中的未被捕获的语法错误

通过其他一些关于类似问题的线索，但他们的解决方案没有奏效。我已经成功地使用下面的代码来添加一个字体到我们的网站，这是基于一个全面的引导模板。我现在开始在一个新站点上工作，这次只使用基本引导模板，并尝试通过相同的方法添加字体。@ font-face chrome中的未被捕获的语法错误

@font-face { 
    font-family: 'myfontname'; 
    src: url('font/myfontname-Regular.svg'); 
    src: url('font/myfontname-Regular.eot'); 
    src: url('font/myfontname-Regular.eot?#iefix') format('embedded-opentype'), 
    url('font/myfontname-Regular.woff2') format('woff2'), 
    url('font/myfontname-Regular.woff') format('woff'), 
    url('font/myfontname-Regular.ttf') format('truetype') 
} 

@font-face { 
    font-family: 'myfontname'; 
    font-weight: bold; 
    src: url('font/myfontname-Bold.svg'); 
    src: url('font/myfontname-Bold.eot'); 
    src: url('font/myfontname-Bold.eot?#iefix') format('embedded-opentype'), 
    url('font/myfontname-Bold.woff2') format('woff2'), 
    url('font/myfontname-Bold.woff') format('woff'), 
    url('font/myfontname-Bold.ttf') format('truetype') 
} 

.myfontnameBOLD{ 
    font-family: myfontname; 
    font-weight: bold; 
    text-transform: uppercase; 
} 

.myfontnameREG{ 
    font-family: myfontname; 
}

文件的存储方式与之前的一样（我的css文件夹内的Font文件夹）。然而，这一次，我碰到下面的错误

uncaught syntaxError:Invalid or unexpected token

在Chrome中调试突出的地方说：“@字体面” 我跑这通过短绒并没有什么问题的第一行，但即使IE是给一个错误并突出显示@ font-face并说它有一个缺少的分号。任何人都能看到可能是错的？谢谢

来源

2016-09-16 Ray_Hack

在此之前的css是什么 - 在导致此线被拾取为错误之前，代码中可能会出现错误（例如，未关闭括号或类似内容） – Pete

没有css之前，此是它包含的唯一CSS。谢谢 –

之前包含的其他样式表呢？ – Pete

难道是url('font/myfontname-Regular.ttf') format('truetype')和url('font/myfontname-Bold.ttf') format('truetype')之后的缺失分号？

@font-face { 
    font-family: 'myfontname'; 
    src: url('font/myfontname-Regular.svg'); 
    src: url('font/myfontname-Regular.eot'); 
    src: url('font/myfontname-Regular.eot?#iefix') format('embedded-opentype'), 
    url('font/myfontname-Regular.woff2') format('woff2'), 
    url('font/myfontname-Regular.woff') format('woff'), 
    url('font/myfontname-Regular.ttf') format('truetype'); 
} 

@font-face { 
    font-family: 'myfontname'; 
    font-weight: bold; 
    src: url('font/myfontname-Bold.svg'); 
    src: url('font/myfontname-Bold.eot'); 
    src: url('font/myfontname-Bold.eot?#iefix') format('embedded-opentype'), 
    url('font/myfontname-Bold.woff2') format('woff2'), 
    url('font/myfontname-Bold.woff') format('woff'), 
    url('font/myfontname-Bold.ttf') format('truetype'); 
}

我已经添加了分号

来源

2016-09-16 12:08:43

谢谢。不幸的是没有运气这是一个奇怪的。正如我所说的相同的代码复制和粘贴在另一个网站上的同一浏览器的作品。 –

我相信AYUSH的回答可以解决您的问题！我也想补充一下，字体加载顺序可能会在某些浏览器和平台上造成一些问题。读取src元素的顺序取决于浏览器和版本使用的顺序。以下面的例子从CSS-Tricks，

@font-face { 
    font-family: 'MyWebFont'; 
    src: url('webfont.eot'); /* IE9 Compatible 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 */ 
}

这是最好的，包括SVG最后，因为它可能会被某些浏览器拾取（如现代的），其中WOFF或woff2支持。

来源

2016-09-16 12:35:26 alexmdodge

谢谢，我这样做是因为Chrome没有在我以前使用过的网站上加载字体的问题。一个stackoverflow条目建议移动svg到顶端，它似乎修复它。但是我在这里尝试了这个建议，对于这个特殊问题没有运气。 –

好的我找到了答案，这是一个愚蠢的。感谢您的回复。问题在于我的HTML中实际声明了css文件。我错误地将它放在了<script>标记中，而不是<link>。 拍拍自我

来源

2016-09-16 12:53:34

@ font-face chrome中的未被捕获的语法错误

回答

相关问题