Question

我在style.css文件中使用此代码，并可以在我想要的地方添加自定义字体。

    @font-face {
    font-family: Titr;
    src: url('fonts/L4i_Titr.ttf');
    url('Thonburi-Bold.eot');
}

但这项工作适用于localhost。当我将本地网站放入网络时，字体不起作用。什么问题？解决方案是什么？

Answer 1

Make Sure字体上传到服务器上，而.eot format的问题路径错误。由于所有最新浏览器都支持.woff字体格式类型。因此，您可以使用.ttf和.woff字体格式类型。

由于您的系统上有字体，因此可以在本地计算机上运行。在服务器上上传字体并在CSS文件中给出正确的文件路径后，将出现自定义字体。

同时确保为所使用的所有字体类型定义font MIME Type。例如，.woff格式在服务器中设置MIME类型，如 application / x-font-woff 。

使用@font-face Generator，您可以将字体格式从.ttf转换为.eot, .svg, .woff。

更新：

在.htaccess文件中添加以下类型的字体：

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff

<强> CSS

@font-face {
  font-family: 'Titr';
  src: url('fonts/L4i_Titr.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('fonts/L4i_Titr.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

Answer 2

如果Kheema Pandey的解决方案不起作用，那么字体文件可能有问题。如果这是真的，那么唯一的共鸣就是因为你已经在你的系统上安装了字体。所以只需检查字体文件是否有任何错误。

编辑：
您是否尝试在多个浏览器中打开在线页面？如果没有，请尝试它，因为特定浏览器可能不支持字体（与我同意）。

如何在网站中使用自定义字体

2 个答案: