gpt4 book ai didi

html - 我的@font-face 怎么了?

转载 作者:太空宇宙 更新时间:2023-11-04 15:18:33 24 4
gpt4 key购买 nike

很抱歉,如果发布多个问题是不正确的做法,但是:

我设置了一个有效的@font-face,但是当我在@font-face 中设置字体粗细时,Firefox 显示我的默认字体而不是我在@font-face 中定义的字体。 Chromium 一开始似乎甚至不能与@font-face 一起使用...而且,我认为由于我无法设置字体粗细,字体 (Lato Black) 太粗了。

这是我的 HTML:

<!DOCTYPE HTML>
<html>

<head>
<meta charset = "utf-8">
<title>Marco Scannadinari</title>
<link href = "layout.css" type = "text/css" rel = "stylesheet">
</head>

<body>
<div class = "centre">
<div class = "lato-black">
<h1>Marco Scannadinari</h1>
</div>
<div class = "cantarell">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
</body>

</html>

...还有我的 CSS:

body {
background: #cdcdcd;
margin-top: 32px;
margin-left: 512px;
margin-right: 512px;
}

div.centre {
text-align: center;
}

@font-face {
font-family: "lato-black";
src: url("fonts/Lato-Bla.ttf")
format("truetype")
}

@font-face {
font-family: "cantarell";
src: local("fonts/Cantarell-Regular.otf")
format("opentype")
}

div.cantarell {
font-family: "cantarell";
}

div.lato-black {
font-family: "lato-black";
text-shadow: 0px 1px #ffffff;
}

最佳答案

您必须为不同的浏览器使用不同格式的字体。最后你应该有这样的东西:

@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}

关于html - 我的@font-face 怎么了?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14819783/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com