0

我想在我的网站的 HTML 中使用自定义字体。我应该怎么做才能让用户正确查看它，无论他们是否已将其安装在他们的 PC 中？

提前致谢！

4

8 回答 8

1 

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

<style>
@font-face {
   font-family:'Elivio',sans-serif;
   font-size:100px;
div{

    font-family:Elivio;

}
</style>

</head>
<body>
<div style="font-family:Elivio;">Elivio is a FAMILY ORGANIZER.
An integrated system for family ,giving solutions for our day to day planning activities. It's an account for the whole family that keeps our family members together<a href="https://www.elivio.com">elivio for family</a>
</div>
<h1 style="font-family:Elivio;">
Elivio</h1>
</body>


</html>

于 2016-07-14T07:13:10.883 回答
0

假设您正在编写如下段落，请添加style="font-family: Verdana"第一个标签：

<html>
 <body>
  <p style="font-family: Verdana">This is a paragraph</p>
 </body>
</html>
于 2013-07-05T04:17:44.927 回答
0

您可以添加Google 字体 api。

<html>
    <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
    <style>
    body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
    }
    </style>
    </head>
<body>
    <div>Making the Web Beautiful!</div>
</body>
</html>

这是谷歌字体的详细信息

于 2013-07-05T03:19:31.930 回答
0 

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

<style>
@font-face {
   font-family:'Elivio',sans-serif;
   font-size:100px;
div{

    font-family:Elivio;

}
</style>

</head>
<body>
<div style="font-family:Elivio;">Elivio is a FAMILY ORGANIZER.
An integrated system for family ,giving solutions for our day to day planning activities. It's an account for the whole family that keeps our family members together<a href="https://www.elivio.com"> elivio for family</a>
</div>
<h1 style="font-family:Elivio;">
<a href="https://elivio.com">Elivio</a> </h1>
</body>


</html>

于 2016-07-14T07:16:29.980 回答
0

这里使用自定义字体的示例（如Elivio）：

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

<style>
@font-face {
   font-family:'Elivio',sans-serif;
   font-size:100px;
div{

    font-family:Elivio;

}
</style>

</head>
<body>
<div style="font-family:Elivio;">Elivio is a FAMILY ORGANIZER.
An integrated system for family ,giving solutions for our day to day planning activities. It's an account for the whole family that keeps our family members together<a href="https://www.elivio.com"> elivio App or site for family best for ever</a>
</div>
<h1 style="font-family:Elivio;">
<a href="https://elivio.com" target="_blank">Elivio</a> </h1>
</body>


</html>

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

<style>
@font-face {
   font-family:'Elivio',sans-serif;
   font-size:100px;
div{

    font-family:Elivio;

}
</style>

</head>
<body>
<div style="font-family:Elivio;">Elivio is a FAMILY ORGANIZER.
An integrated system for family ,giving solutions for our day to day planning activities. It's an account for the whole family that keeps our family members together<a href="https://www.elivio.com"> elivio for family</a>
</div>
<h1 style="font-family:Elivio;">
<a href="https://elivio.com">Elivio</a> </h1>
</body>


</html>

于 2016-07-14T07:21:35.100 回答
0

最简单的方法是为此使用 Google 字体。这是一个片段，向您展示它是如何完成的。

body {
  font-family: 'Oswald', sans-serif;
}
<html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
  </head>
  <body>
    <div>
      <h1>Lorem ipsum dolor sit amet</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</body>
</html>

在上面的代码中，您在标题中引用了 google 字体，如下所示：

<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

您可以在此处找到不同的 Google 字体： https: //www.google.com/fonts

只需像这样在你的css中设置字体：

body {
  font-family: 'Oswald', sans-serif;
}

您可以将字体设置为页面上的任何元素，也可以设置为我的示例中的正文，以便在所有元素上使用它。

Google 字体将这些字体包含在您的页面中，并带有@font-face.

@font-face CSS at-rule 允许作者指定在线字体以在其网页上显示文本。通过允许作者提供自己的字体，@font-face 消除了依赖用户在其计算机上安装的有限数量的字体的需要。@font-face at-rule 不仅可以用在 CSS 的顶层，也可以在任何 CSS 条件组 at-rule 中使用。

您可以在MDN 文档中找到更多信息

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v11/yg0glPPxXUISnKUejCX4qfesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v11/pEobIV_lL25TKBpqVI_a2w.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

您还可以在项目中拥有自己的自定义字体（文件），只需将源 URL 设置为指向您的字体所在的位置。

于 2016-06-03T14:51:17.310 回答
0 

<html>
<head>
<style>
@font-face {
   font-family:Elivio;
   font-size:100px;
   src: url('KittenSwashMonolineTrial.ttf');
div{

    font-family:Elivio;

}
</style>

</head>
<body>
<div style="font-family:Elivio;">Elivio is a FAMILY ORGANIZER.
An integrated system for family ,giving solutions for our day to day planning activities. It's an account for the whole family that keeps our family members together<a href="https://www.elivio.com">elivio for family</a>
</div>
<h1 style="font-family:Elivio;">
Elivio</h1>
</body>


</html>

于 2016-06-03T12:59:03.030 回答
-1 

@font-face {
   body {
  font-family: 'Elivo', sans-serif;
}
div{

    font-family:Elivio;

}

于 2016-06-03T13:04:51.653 回答