个人中心
gpt4 book ai didi

html - @font-face 和@font-family 不工作

转载 作者：太空宇宙 更新时间：2023-11-03 20:28:12 24 4
gpt4 key购买 nike

我正在尝试做一些非常简单的事情:将 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;
}

最佳答案

这绝对不是使用 Google 字体的方式...您甚至没有链接到实际字体，而是链接到支持页面。

<style>
  @import url('https://fonts.googleapis.com/css?family=Roboto');
</style>

首先进入页面:https://fonts.google.com/specimen/Roboto

然后点击这个:

enter image description here

然后它会在 Angular 落里创建一个小盒子。单击该框，您将看到它。现在你有了实际的代码:

enter image description here

关于html - @font-face 和@font-family 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48931677/

24 4 0
文章推荐： python - python django 使用 Post 方法时出现 MultiValueDictKeyError
文章推荐： python - 组合两个 block 并循环两个 block
文章推荐： c# - 动态加载类型的 SerializationException
文章推荐： c# - 在 C#/XNA 中使用通用函数进行碰撞检测
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com