Question

我现在正在构建一个使用 clickatell 提供短信服务的新网站。该网站有许多未在客户端定义的字体系列，例如，如果我从其他计算机打开网站字体将显示为默认值。我在font-face中学到了CSS;但它不起作用＆gt;这是我简单的测试代码：

<html>
    <head></head>
    <style> 
        @font-face {
            font-family: 'oswald_stencilregular';
            src: url('/protected/extensions/Fonts/oswald/Oswald-Light.otf');
            font-weight: normal;
            font-style: normal;
        }
    </style>
    <body>
        <div style='font-family:oswald_stencilregular'>
            give me my font 
        </div>
    </body>
</html>

请参阅，它是简单的代码，但测试"give me my font"将不会显示此类型的字体;我已经安装了字体，我从代码中看到了一个字体路径。我已经测试了来自其他php文件的路径并且它正在工作，我已经做了很多研究，但仍然是同样的问题，这就是为什么这个字体的声明不起作用的原因，是否有另一种声明字体的方法服务器端所以客户端不关心他是否有这种类型的字体和他的计算机，他将显示服务器端声明的字体？

Answer 1

首先，请确保您的style声明使用双引号（即：style="font-family:oswald_stencilregular;"

其次，请注意each browser uses a different font format。除非您在Safari 3.2+或Firefox中进行测试，否则您的浏览器需要使用不同的字体格式，如.woff或.ttf或.svg。

Answer 2

这是我在许多项目中使用的跨浏览器font-face，它运行得很好：

@font-face {
  font-family: "YOURFONT";
  src: url('path-to/font.eot?#') format('eot'),  /* IE6–8 */
       url('path-to/font.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
       url('path-to/font.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}

但是，您必须测试其他一些内容：1。您的服务器是否支持您的字体mime-type？ 2.您正在测试哪种浏览器？

Answer 3

没有一种字体格式适用于所有浏览器。为避免这种情况，您通常会为所需的每种字体添加多种字体格式。 CSS的内容如下所示：

@font-face {
    font-family: 'BMR';
    src: local('blissmediumregular');
    src: url('/fonts/blissmedium-webfont.eot');
    src: url('/fonts/blissmedium-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/blissmedium-webfont.woff') format('woff'),
         url('/fonts/blissmedium-webfont.ttf') format('truetype'),
         url('/fonts/blissmedium-webfont.svg#blissmediumregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

您也可以尝试使用像Font Squirrel这样的字体生成器工具来获取所需的不同字体类型。

Answer 4

某些托管服务器不支持字体样式，因为您需要在Windows服务器中添加.otf mime类型，以便字体正常工作。

您使用的是Windows Server吗？

显示未在客户端定义的字体，仅在服务器上显示

4 个答案: