堆栈内存溢出
  繁体   English   中英

HTML自定义字体

[英]HTML custom fonts

 原文  2013-07-05 03:16:52  8   8    html/ fonts

问题描述

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

提前致谢！

8 个解决方案

解决方案1
 1  2016-07-14 07:13:10

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

解决方案2
 0  2013-07-05 03:19:31

您可以添加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字体的详细信息

解决方案3
 0  2013-07-05 04:17:44

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

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

解决方案4
 0  2016-06-03 12:59:03

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

解决方案5
 0  2016-06-03 14:51:17

最简单的方法是为此使用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规则允许作者指定在线字体以在其网页上显示文本。 通过允许作者提供自己的字体，@ font-face消除了依赖用户在计算机上安装的字体数量有限的需要。 @ font-face规则不仅可以在CSS的顶级使用，而且可以在任何CSS条件组规则中使用。

您可以在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设置为指向字体所在的位置即可。

解决方案6
 0  2016-07-14 07:16:29

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

解决方案7
 0  2016-07-14 07:21:35

下面是使用自定义字体（例如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>

解决方案8
 -1  2016-06-03 13:04:51

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 HTML / CSS-使用自定义字体 具有html标签的iOS自定义字体 HTML / CSS多种自定义字体 html-将自定义字体发送给用户 如何在 HTML 中使用自定义字体？ Java Swing JLabel，HTML和自定义字体 如何在HTML页面中使用自定义字体 在自定义SharePoint MasterPage HTML中使用Web字体 在 HTML5 中内联自定义 CSS 字体 Android - 带自定义字体的Html.fromHtml（）
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM