@ 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中的未被捕獲的語法錯誤

回答

相關問題