CSS3中的@font-face问题

Question

我用@font-face去使用自定义字体，在PC机上使用，除开safari，其他浏览器都没问题，但是，倘若将它在ipad上使用，safari又没问题。以下是我写的@font-face
@font-face{
font-family:f1;
src:url('f1.eot');
src:url('f1.eot?#iefix') format('embedded-opentype'),
url('f1.woff') format('woff'),
url('f1.ttf') format('truetype'),
url('f1.svg#f1') format('svg');
}
而且.svg格式在safari中完全不能被支持

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

你使用的@font-face语法是错误的，你应该使用srcset和hrefset属性来指定不同的资源。例如：

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

这样你的@font-face就会为所有主流浏览器提供正确的资源。

至于SVG的问题，这通常是因为你的SVG文件没有正确地被编译或者链接到HTML文档中。确保你的SVG文件已经被正确地编译，并且正确地链接到了HTML文档中。