Question

通过一些关于类似问题的其他线程，但他们的解决方案不起作用。我已成功使用下面的代码为我们的网站添加一个基于全面的bootstrap模板的字体。我现在开始在一个新站点上工作，这次只来自一个基本的bootstrap模板，并尝试通过相同的方法添加字体。

@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：无效或意外的令牌

在Chrome中，调试突出显示第一行“@ font-face” 我通过Linter运行它并没有问题，但即使是I.E也会出错并突出显示@ font-face并说它缺少分号。任何人都能看到可能出错的地方？感谢

Answer 1

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

Answer 2

可能是chargeFee :: Customer a -> Maybe Int chargeFee (Inactive _) = Nothing chargeFee (Active cust) = ...和url('font/myfontname-Regular.ttf') format('truetype')之后缺少的分号？

url('font/myfontname-Bold.ttf')  format('truetype')

我添加了分号

Answer 3

我相信 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的某些浏览器（如现代浏览器）拾取。

chrome中的@ font-face uncaught语法错误

3 个答案: