我正在查看@ font-face CSS规则的MDC页面,但我没有得到一件事.我有单独的文件粗体,斜体和粗体+斜体.如何将所有三个文件嵌入一个@font-face规则中？例如,如果我有:
@font-face {
font-family: "DejaVu Sans";
src: url("./fonts/DejaVuSans.ttf") format("ttf");
}
strong {
font-family: "DejaVu Sans";
font-weight: bold;
}
浏览器将不知道哪个字体用于粗体(因为该文件是DejaVuSansBold.ttf),因此它将默认为我可能不想要的东西.如何告诉浏览器我对某种字体的所有不同变体？
我是@font-face第一次使用并从fontsquirrel下载了一个字体套件
他们建议在我的CSS中插入的代码是:
@font-face {
font-family: 'junctionregularRegular';
src: url('Junction-webfont.eot');
src: local('?'),
url('Junction-webfont.woff') format('woff'),
url('Junction-webfont.ttf') format('truetype'),
url('Junction-webfont.svg#webfontoNEpZXy2') format('svg');
}
现在,笑脸的事让我难过.但是src中的url数量也是如此 - 为什么他们推荐这么多文件,并且在呈现页面时它们都会被发送到浏览器？删除除.ttf以外的所有内容有什么害处吗？
我必须在项目中使用花哨的字体,但我真的想避免sifr和其他丑陋的替代品,所以我在看@ font-face.
但是,我真的很困惑几个博客/网站对其可用性提出了不同的看法.准备好了吗？今天哪些浏览器支持它？
谢谢
目前我在我的风格标签中这样做
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
* {
font-family: 'Roboto', sans-serif;
}
但我下载了 Roboto 字体，想知道如何配置 Tailwind 以对所有元素全局使用这些文件和字体。
边注：
我正在使用 Vuejs 并按照有关如何从此处为 Vue 设置 Tailwind 的指南进行操作
我在我的网站上添加了一个自定义字体(Segoe UI),但字体文件大约为1mb,第一次加载需要几秒钟.
我在Mac上,OSX不附带该字体.但是,据我所知,它包含在Windows中.
我怎样才能让CSS 只加载的字体,如果它不是已经在客户端上现有的？
我在计算机上安装了想要应用于HTML5 / CSS3的字体时遇到问题。
我的问题与可能重复的问题有何不同：它明确询问要在.html文件中放入什么，重复问题中未解决的问题。
解决问题后更新：
1）该<link href=....>行不得包含在.html文件中
2）.woff字体文件必须与.css文件位于同一目录中。
这是我最小的工作CSS：
@font-face{
font-family: Reef;
src: local('../Fonts/Reef/reef-webfont.woff'), url('../Fonts/Reef/reef-webfont.woff') format('woff');
}
body, h1, h2{
text-align:center;
font-family: 'Reef', monospace;
}
这是我最小的工作HTML文件：
<html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/
libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript"></script>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" href="stylesGrilcheeserie.css" type="text/css"/>
<link href='../Fonts/Reef/reef-webfont.woff' rel='stylesheet' type='text/css'>
<title> Grilcheeserie </title>
</head>
<body>
<h1>La Grilcheeserie</h1>
</body>
</html>
无论我做什么，页面都会显示其备用字体，等宽字体而不是Reef。
我的问题是：如何正确引用html中的字体来源？据我从搜索答案中得知，我的CSS应该是正确的。
我在Windows 10上使用Firefox。
css ×5
font-face ×5
css3 ×3
fonts ×3
font-family ×1
html ×1
html5 ×1
javascript ×1
tailwind-css ×1