Question

我正在建立一个基本的信息网站。在我的CSS文件中，我有以下内容：

@font-face {
    font-family: "Nilland";
    src: local('Nilland.ttf');
}

body{
    background: #FFF;
    font-size:14px;
    font-family: Nilland;
}

.ttf文件与index.html文件位于同一目录中。为什么这不起作用？

Answer 1

您需要包含所有类型的字体，而不仅仅是.ttf，应该是这样的：

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

Answer 2

将ttf文件放在css文件所在的文件夹中。 css文件中的路径是相对于css文件而不是html文件

Answer 3

尝试指定完整路径

Answer 4

@Felix是对的;尝试单独的块为普通和粗体字体。使用svg和其他格式实现多种浏览器兼容性和路径可能无法正常工作。

@font-face {
    font-family: 'Nilland';
    src: url('../fonts/Nilland.ttf') format('truetype'), url('fonts/Nilland.svg') format('svg');
    src: url('../fonts/Nilland.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Nilland";
    src: url("../fonts/Nilland.ttf") format('truetype');
    font-weight: bold;
    font-style: normal;
}

试图使用@ font-family

4 个答案: