Question

    @font-face {
        font-family: "Caecilia";
        src: url("Assets/CaeciliaLTStd-Bold.ttf"), format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    h1 { color:#23445f; font-family:Caecilia;}

此示例代码适用于Chrome，但不适用于Safari（常规版和iOS版）。 Safari有特殊修复方法吗？

Answer 1

字体链接是否以不同格式提供？如果是，请尝试以下操作。

   @font-face {
    font-family: "Caecilia";
    src: url("Assets/CaeciliaLTStd-Bold.eot") format('embedded-opentype'), /* EDIT correction on this line */
    url('Assets/CaeciliaLTStd-Bold.woff') format('woff'),
    url('Assets/CaeciliaLTStd-Bold.ttf') format('truetype'),
    url('Assets/CaeciliaLTStd-Bold.svg#') format('svg');
    font-weight: normal;
    font-style:normal;
  }

编辑：编辑：对不起。在embedded-opentype的第一个declration中，我有ttf而不是eot。试一试

Answer 2

如果您拥有相应的权限，则可以尝试使用Font Squirrel生成您尝试完成的所有必要的字体和CSS：

http://www.fontsquirrel.com/fontface/generator

font-face：Safari iOS的特殊字体

2 个答案: