我如何在CSS中嵌入自定义字体？

我最近一直在试图将字体嵌入到我的网站。我没有得到它的工作，我看过并阅读教程。我不想在ttf格式中嵌入名为“Ubuntu Light”的字体。这是我一直在努力：我如何在CSS中嵌入自定义字体？

#logBtn{ 
    font-family: 'UbuntuLight'; 
} 
@font-face{ 
font-family: "UbuntuLight"; 
src: url("CSS/Ubuntu-L.ttf"); 
}

，文件夹中文件：Treeview of project

我几乎新来这个，我已经在大约四个月了编码的HTML和CSS。我之前一直坚持这样做，这让我取消了我的项目，因为我放弃了。但我不想再放弃。所以我会很感激一些帮助！ :)

来源

2016-05-12 Tobias Rasmussen

我真的推荐使用https://www.google.com/fonts/这包括您当前需要的字体以及其他数千种字体，我没有看过，但它是因为您在导入字体后使用它？ - 另请尝试删除单撇号 – ConorReidd

在将其添加到项目之前，您是通过https://www.fontsquirrel.com/tools/webfont-generator等webfont生成器转换字体的吗？ – drip

您可以嵌入字体的快速简便：

@font-face { 
    font-family: 'Name'; 
    src: url('Font.ext'); 
    font-weight: 400; 
    font-style: normal; 
}

其中Font.ext应替换为您的字体文件及其扩展名（文件类型）eg

src：url（'Ubuntu-L.ttf'）;

而下面字体重量和字体风格应引用特定字体的选择。

来源

2016-05-13 13:41:23 snkv

好的，非常感谢！ :) –

但它不起作用。你能看看我做错了吗？这是**代码**：'#logBtn font-family：“UbuntuL”; font-size：30px; 颜色：白色; } @ font-face { font-family：'UbuntuL'; src：url（'UbuntuL.ttf'）; font-weight：400; font-style：Light; }'也许更容易看到这里：https://i.gyazo.com/f1d365053f57ade7476bb886b1f34b86.png –

你的font-face声明应该总是在CSS文件的顶部，@SynomousArtz – snkv

url(...)路径是相对于样式表。

因此，由于样式表是在CSS文件夹，你并不需要包含在URL：通过使用此代码

@font-face{ 
    font-family: "UbuntuLight"; 
    src: url("Ubuntu-L.ttf"); 
}

来源

2016-05-12 19:41:04 Quantastical

我如何在CSS中嵌入自定义字体？

回答

相关问题