html - 我的问题是将字体上传到网站

标签 html css bootstrap-4

主要问题是字体显示与应有的不同,尽管一切都已正确连接。 我设法在 html 和 css 中找到了源代码,其中显示了如何使用此字体,并且它开始按应有的方式出现。 关于为什么字体不起作用的唯一建议是,这种 ttf 格式的字体在网络上不起作用。

谢谢大家的帮助!

/* #### Generated By: http://www.cufonfonts.com #### */

@font-face {
font-family: 'Voya Nui';
font-style: normal;
font-weight: normal;
src: local('Voya Nui'), url('VoyaNui_1.15_4.woff') format('woff');
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css"
          href="style.css"/>
</head>

<body>

<h1 style="font-family:'Voya Nui';font-weight:normal;font-size:65px">018.0204  BIOLOGICAL CHRONICLE</h1>


</body>
</html>

最佳答案

你不能做 <link rel="stylesheet" href="fonts/VoyaNui_1.15_4.ttf"> .

你需要在css或style中使用@font-face

@font-face {
  font-family: 'VoyaNui';
  src:   url('./fonts/VoyaNui_1.15_4') format('woff2'),
    url('./fonts/VoyaNui_1.15_4') format('woff'),
    url('./fonts/VoyaNui_1.15_4') format('ttf');
}

还有一件事,我使用 woff 和 woff2,因为它们具有良好的压缩性,但要小心某些浏览器 (IE)。

参见 caniuse https://caniuse.com/#search=woffhttps://caniuse.com/#search=woff2

关于html - 我的问题是将字体上传到网站,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55081047/

相关文章:

HTML <select> with background-color <option> tags using Chrome

Javascript删除点后的数字

css - Bootstrap 在 Angular 6 中无法正常工作

html - 在不影响body宽度的情况下使用宽背景div的技巧

javascript - 如何水平居中比手机屏幕宽的div?

css - 使用 simple_form_for 给表单一个 CSS 类

javascript - 使用 Snap.js 进行内容填充

css - 带有 Font Awesome 的中心 div

html - 相对于图像的特定部分在响应图像上定位文本

javascript - 使用 bootstrap 4 在 React 中下拉