Question

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

提前致谢！

Answer 1

＆＃13;

<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>

＆＃13;

Answer 2

您可以添加 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>

以下是Google fonts

的详细信息

Answer 3

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

<html>
 <body>
  <p style="font-family: Verdana">This is a paragraph</p>
 </body>
</html>

Answer 4

<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>

Answer 5

最简单的方法是使用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条件组中使用。

您可以在MDN documentation

中找到更多信息

@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;
}

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

Answer 6

<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>

Answer 7

这里使用自定义字体的示例（如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>

Answer 8

＆＃13;

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

＆＃13;

HTML自定义字体

8 个答案: