Question

我观看了一些视频并复制了他们所做的事情，但它没有奏效。我将文件放在与文档相同的文件夹中。呃，该网站希望我添加更多＆＃34;详细信息＆＃34;或者它不会让我发布。我把我的html和我的CSS页面分开，但它把它们放在一起。如果你知道如何随意将它们分开。

＆＃13;

.float-img {
  float: left;
  margin-right: 10px;
  margin-left: 5px;
  margin-bottom: 0px;
  margin-top: 10px;
  padding: 2px;
  border: none;
}

.potato {
  margin-left: 250px;
  margin-top: 40px;
  margin-right: 20px;
  line-height: 38px;
  font-family: 'lazyspringday';
}

.p1 {
  font-family: 'lazyspringday';
}

body {
  margin: 0;
  padding: 0;
  font-family: 'lazyspringday', serif;
}

@font-face {
  font-family: "lazyspringday";
  src: url('lazyspringday.ttf') format:('truetypefont');
}

.nav {
  background-color: #ffb6c1;
  color: #ffffff list-style: none;
  text-align: center;
  padding: 20px 0 20px 0;
}

.nav>li {
  display: inline-block;
  padding-right: 50px;
  font-size: 16px;
}

.nav>li>a {
  text-decoration: none;
  color: #ffffff
}

.nav>li>a:hover {
  color: #C0C0C0
}

.banner {
  width: 100;
  display: block;
}

.banner>.bannerimage {
  width: 100;
  height: 100;
  display: block;
}

ul.nav {
  margin: 0;
}

div.left {
  width: 50%;
  padding: 0 0 0 5%;
  margin-right: 5px;
  margin-top: 10px;
  float: left
}

div.right {
  width: 50%;
  padding: 0 5% 0 0;
  float: right
}

p {
  padding-top: 25px;
  text-align: left;
}

.potato {
  color: #00b8e6;
  font-size: 15px;
  font-family: 'lazyspringday';
  font-weight: 100;
}

＆＃13;

<div class="header">
  <img class="banner-image" src="ccc.png" width="100%" height="150px">

</div>

<ul class="nav">



  <li><a href="index.php">Home</a></li>
  <li><a href="aboutus.php">About Us</a></li>
  <li><a href="menu.php">Menu</a></li>
  <li><a href="entertowin.php">Enter to Win</a></li>
  <li><a href="merchandise.php">Merchandise</a></li>
  <li><a href="events.php">Events</a></li>
  <li><a href="contactus.php">Contact Us</a></li>

</ul>
<img src="british-shorthair-3055340_1920.jpg" width: "400" height="400" class="float-img">


<p class="potato">
  Step into a magical world of cats at Cat Corner Cafe. Enjoy eating cute cat themed foods and drinks in a relaxing environment. Spend some quality time playing with some feline friends. Enjoy watching the cats have fun in an environment made just for them.
  All cats will be adoptable and provided by the local shelter. Cat Corner Cafe will also have fun events like cat yoga, art with cats and game days. Come by yourself, with your meetup group or have your next birthday party here! We look forward to seeing
  you. To be alerted when we open please sign up with your email on our homepage.
</p>

＆＃13;

Answer 1

首先在顶部定义@font face并从格式中删除":"并将 turetypefont 重命名为 truetype

@font-face {
  font-family: "lazyspringday";
  src: url('lazyspringday.ttf') format('truetype');
  }

希望这会有所帮助

Answer 2

首先，将你的字体分别放在fonts文件夹和css文件夹中的css样式表中，然后在你的css中包含/导入字体，就像这样。

@font-face {
    font-family: 'lazyspringday';
    src: url('../fonts/lazyspringday.eot');
    src: url('../fonts/lazyspringday.eot?#iefix') format('embedded-opentype'),
     url('../fonts/lazyspringday.woff2') format('woff2'),
     url('../fonts/lazyspringday.woff') format('woff'),
     url('../fonts/lazyspringday.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}

我们使用woff和woff2在web中使用字体。您还可以使用Web字体生成器生成仅在上传.ttf文件的webfonts。

Answer 3

在html文件的head标签中（索引？），可以这样：

<link href="(your file location)" rel="stylesheet">

导入字体后，您可以通过多种不同方式进行操作。我建议您使用包含该html文件中所有内容的正文标记。如果您选择使用body标签，只需将此行添加到您的css文件中：

body {
 font-family: 'Montserrat', serif;
}

Answer 4

示例：

使用Google字体。 https://fonts.google.com

然后将此代码复制到<head>文档的HTML。

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

然后使用以下CSS规则指定这些系列：

font-family: 'Roboto', sans-serif;

我的自定义字体不起作用

4 个答案: