Question

我有一个我需要在

中使用的自定义字体

项目/资产/字体/ font.ttf

css文件在

中

项目/ 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是一种用于网页的字体格式。它是在2009年开发的，现在是W3C推荐标准。 WOFF本质上是具有压缩和附加元数据的OpenType或TrueType。目标是通过带宽限制的网络支持从服务器到客户端的字体分发。

来源：w3schools - CSS3 Web Fonts

Answer 2

您以错误的方式包含字体，请使用@fontface：

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

然后就像使用其他任何字体一样使用字体：

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

Answer 3

您首先需要使用 @font-face 在CSS中导入此字体，例如：

@font-face {
  font-family: MyFont;
  src: url('myfont.ttf');
}

然后将其用作元素中的字体，例如：

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

希望这有帮助！

div内的文本上的自定义字体

3 个答案: