时间戳

首页 > 解决方案 > 似乎无法从内部源加载字体？

html - 似乎无法从内部源加载字体？

问题描述

所以基本上我只是想为'body'div使用不同的字体，但我无法让它工作..有人可以告诉我如何从内部文件和URL加载它们吗？提前致谢！

（所以基本上我只是想为'body'div使用不同的字体，但我无法让它工作。有人可以告诉我如何从内部文件和URL加载它们吗？提前谢谢！ )

* {
  box-sizing: border-box;
}

@font-face {
    font-family: 'zcool_qingke_huangyouregular';
    src: url('fonts/zcool-webfont.woff2') format('woff2'),
         url('fonts/zcool-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  padding: 0;
  margin: 0;
  border: 0;
  background-color: grey;
  background-attachment: fixed;
  background-size: 100% auto;
}

ul#horizontal-list {
  list-style: none;
}

ul#horizontal-list li {
  display: inline;
}

ul {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: center;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: red;
}

.navbar {
  position: fixed;
    top: 0;
    height: 50px;
    width: 100%;
    background-color: black;
    color: white;
    text-align: center;
    left: 0;
    right: 0;
    z-index: 1;
}

.navbar ul {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style-type: none;
  margin-top: 0px;
}

.header {
	width: 100%;
	height: 100%;
	background-image: url("img/bg/background1.png");
	background-color: grey;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.body {
  /*height: 100%;*/
  width: 100%;
  background-color: white;
  color: black;
  padding-left: 5%;
  padding-right: 5%;
  overflow: hidden;
  font-family: 'zcool_qingke_huangyouregular';

}

.content {
	margin: auto;
	width: 100%;
	background-color: white;
	color: black;
	border-right: double;
	border-left: double;
	box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);
	text-align: justify;
	font-size: 20px;
	font-family: arial;
	padding-top: 10%;
	padding-bottom: 10%;
	padding-left: 5%;
	padding-right: 5%;
}

.social {
	margin: auto;
	display: flex;
	justify-content: center;
}


.me {
	float: left;
	margin-right: 3%;
	height: 100%;
}



.footer {
  height: 50px;
  width: 100%;
  background-color: black;
  color: white;
  margin: auto;
  vertical-align: middle;
}

#copyright {
	display: table;
}

#cpy{
    display: table-cell;
    vertical-align: middle;
}
<!DOCTYPE html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <link rel="icon" type="image/x-icon" href="img/favicon.ico"/>
  <meta name="description" content="My Personal Portfolio">
  <title>John's Work</title>
</head>

<body>


  <div class="navbar">

    <ul>
      <li><a href="index.html">HOME</a></li>
      <li><a href="about.html">ABOUT</a></li>
      <li><a href="contact.html">CONTACT</a></li>
    </ul>

  </div>


  <div class="header">
	<!-- Can stay empty -->
  </div>

  <div class="body">
  <div class="content">
  
Lorem Ipsum Text Lorem Ipsum Text Lorem Ipsum Text Lorem Ipsum Text Lorem Ipsum Text Lorem Ipsum Text Lorem Ipsum Text Lorem Ipsum Text Lorem Ipsum Text Lorem Ipsum Text Lorem Ipsum Text Lorem Ipsum Text Lorem Ipsum Text Lorem Ipsum Text
  </div>
</div>

  <div class="footer" id="copyright" style="text-align:center">
    <div id="cpy">&copy;  (2019)</div>
  </div>



</body>

</html>

标签： htmlcssfonts

解决方案

您的@font-face声明看起来正确。如果“内部源”是指在fonts相对于您的 css 的目录下找到的文件。如果您想使用用户机器本地的字体文件，您可以使用该local()函数而不是该src()函数（或者更好地同时使用两者）。

问题似乎是您只在类选择器上调用此自定义字体.body，并且未使用该类名。如果您打算定位您的<body>元素，那么您想使用body 类型选择器。

推荐阅读