Question

所以基本上我只是想为'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>

Answer 1

您的Example on DotNetFiddle声明看起来正确。如果“内部来源”是指相对于CSS在fonts目录下找到的文件。如果要使用用户计算机本地的字体文件，可以使用local()函数而不是src()函数（或者最好同时使用）。

问题似乎是您只能在.body的{{3}}上调用此自定义字体，而未使用该类名。如果您打算定位<body>元素，则想改用body @font-face。

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

1 个答案: