@font-face和@font-family不工作
@font-face和@font-family不工作
提问于 2018-02-22 23:50:53
我正在试着做一些非常简单的事情:添加3种字体到一个html页面。
我看了大量的例子，但没有一个能解决我的问题。也许我在它被写的方式中缺少一些东西。我其实不是很确定。
我的html：
<html>
<head>
<title>Fuentes</title>
<link type="text/css" rel="stylesheet" href="Fuentes.css">
</head>
<body>
<p class="a">This is a paragraph, shown in Roboto font.</p>
<p class="b">This is a paragraph, shown in Bellefair font.</p>
<p class="c">This is a paragraph, shown in the Kavivanar font.</p>
</body>
</html>和我的.css：
@font-face {
font-family: "Roboto";
src: url(https://fonts.google.com/specimen/Roboto) format("truetype");
}
@font-face {
font-family: "Bellefair";
src: url(https://fonts.google.com/specimen/Bellefair) format("truetype");
}
@font-face {
font-family: "Kavivanar";
src: url(https://fonts.google.com/specimen/Kavivanar) format("truetype");
}
p.a {
font-family: "Roboto", Roboto, sans-serif;
}
p.b {
font-family: "Bellefair", Bellefair, sans-serif;
}
p.c{
font-family: "Kavivanar", Kavivanar, sans-serif;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2018-02-22 23:53:02
这绝对不是使用Google字体的方式...您甚至没有链接到实际的字体，而是链接到了支持页面。
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
</style>首先转到页面：https://fonts.google.com/specimen/Roboto
然后单击此按钮：
然后它会在角落里创建一个小盒子。单击该框，您将看到以下内容。现在你有了实际的代码：
Stack Overflow用户
发布于 2018-02-23 00:02:42
你应该在你的html中为你想要使用的每种google字体添加样式表链接。例如，在html中使用roboto字体的<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">，然后在font-family: 'Roboto', sans-serif;中使用css。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48931677
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号