Question

我最近将我的代码上传到bluhost，以创建我的投资组合网站。但是，当字体出现在我的计算机上时，当我加载网站时（通过主机bluehost）它们不显示。

这是我的CSS代码。问题是通过CSS还是bluehost解决的？

@font-face {
    font-family: playfair-italic;
    src: url(fonts/playfair-display/PlayfairDisplay-Italic.otf);   
}
@font-face {
    font-family: playfair-regular;
        src: url(fonts/playfair-display/PlayfairDisplay-Regular.otf);
}

@font-face {
    font-family: playfair-sc;
        src: url(fonts/playfair-display/PlayfairDisplaySC-Regular.otf);
}

@font-face { 
font-family: opensans-regular;
    src: url(fonts/open-sans/OpenSans-Regular.ttf);
}

@font-face { 
font-family: opensans-semibolditalic;
    src: url(fonts/open-sans/OpenSans-SemiboldItalic.ttf);
}

@font-face { 
font-family: opensans-semibold;
    src: url(fonts/open-sans/OpenSans-Semibold.ttf);
}

Answer 1

尝试在每个网址之前添加“ ./”，以将其转换为相对路径。

@font-face {
    font-family: playfair-italic;
    src: url(./fonts/playfair-display/PlayfairDisplay-Italic.otf);   
}
@font-face {
    font-family: playfair-regular;
        src: url(./fonts/playfair-display/PlayfairDisplay-Regular.otf);
}

@font-face {
    font-family: playfair-sc;
        src: url(./fonts/playfair-display/PlayfairDisplaySC-Regular.otf);
}

@font-face { 
font-family: opensans-regular;
    src: url(./fonts/open-sans/OpenSans-Regular.ttf);
}

@font-face { 
font-family: opensans-semibolditalic;
    src: url(./fonts/open-sans/OpenSans-SemiboldItalic.ttf);
}

@font-face { 
font-family: opensans-semibold;
    src: url(./fonts/open-sans/OpenSans-Semibold.ttf);
}

Answer 2

由于它们都是Google字体，您可能希望使用script标签从Google CDN中提取字体文件，而不是将其嵌入到项目中并从您的网站提供。

在HTML文件的<head>中添加以下内容：

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,600i|Playfair+Display+SC|Playfair+Display:400,400i" rel="stylesheet">

要在CSS文件中使用字体，请使用以下规则：

font-family: 'Open Sans', sans-serif;
font-family: 'Playfair Display', serif;
font-family: 'Playfair Display SC', serif;

//font-weight and font-style will define the rest
font-weight: 400; // This is the regular weight
font-weight: 600; // This is the bold weight

font-style: italic; // The default is regular

上载到Bluehost时未出现的字体

2 个答案: