html - div 内文本的自定义字体

Question

我有一个需要在内部使用的自定义字体

project/assets/fonts/font.ttf

css文件在里面

project/css/style.css

html 片段是:

<div class="text"> title </div>

CSS部分是:

.text{
width: 33.3%;
float:left;
font-family:font;
src: url('../assets/fonts/font.ttf');}

但这不起作用。也就是说，文本以默认字体显示。这里出了什么问题？

Answer 1

首先，您可能需要考虑使用众多 .ttf 到 .woff 在线转换器之一，因为 .woff 是更适合网络的格式。

其次，您需要在开始使用字体之前声明它。这可以在 CSS 中完成，如下所示:

@font-face {
    font-family: myFont;
    src: url('../assets/fonts/font.ttf');
}

.text {
    width: 33.3%;
    float:left;
    font-family: myFont;
}

---

关于.woff建议:

WOFF is a font format for use in web pages. It was developed in 2009, and is now a W3C Recommendation. WOFF is essentially OpenType or TrueType with compression and additional metadata. The goal is to support font distribution from a server to a client over a network with bandwidth constraints.

来源:w3schools - CSS3 Web Fonts