gpt4 book ai didi

html - 似乎无法更改字体类型

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

我在 .otf 文件中有几个自定义字体:

我的 index.html 文件如下所示:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>My Website</title>
<link rel="stylesheet" href="css/style.css" >
</head>
<body>
<h3 style = "font-family: customBold;">Hello</h3>
<h3 style = "font-family: customLight;">Hello</h3>
<h3 style = "font-family: customRegular;">Hello</h3>
<h3 style = "font-family: customThin;">Hello</h3>
</body>
</html>

我的 style.css 看起来像这样

@font-face {
font-family: customBold;
src: url(fonts/Custom-Bold.otf);
}

@font-face {
font-family: customLight;
src: url(fonts/Custom-Light.otf);
}

@font-face {
font-family: customRegular;
src: url(fonts/Custom-Regular.otf);
}

@font-face {
font-family: customThin;
src: url(fonts/Custom-Thin.otf);
}

但是,h3 的字体不会改变。

我遵循了这个:

http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

最佳答案

尝试使用所有类型,如 .otf、.eot、.ttf 等。将这些类型添加到您的 css 文件中。

不同浏览器不支持的类型很少。查看http://caniuse.com/#feat=ttf

查看下面的代码,我们如何添加在不同浏览器上工作所需的所有格式。引用自https://css-tricks.com/snippets/css/using-font-face/

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

另请参阅此链接以获取更多信息(类似问题),Using .otf fonts on web browsers

关于html - 似乎无法更改字体类型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32438890/

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