标准实例

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato|Poppins|Inter|Montserrat|Varela+Round">
<style>
body {
  font-family: "Lato";
  font-size: 22px;
}
</style>
</head>
<body>

<h1>Sofia Font</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

</body>
</html>

HTML 引用方式

HTML 引用字体文件

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato|Poppins|Inter|Montserrat|Varela+Round">

CSS 应用字体样式

.myFont {
    font-family: Lato, sans-serif;
}

CSS 引入方式

@IMPORT

@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
body {
    font-family: Poppins, sans-serif;
}

官方文档

Google Fonts[ZH]

Google Fonts[EN]

Google Fonts Usage[ZH]

Google Fonts GitHub[EN]

相关链接

https://hexingxing.cn/google-fonts-api/

https://hexingxing.cn/15-best-google-fonts/

https://hexingxing.cn/css3-font-face-and-link-css/

https://hexingxing.cn/visual-colors-and-fonts-style/


友情提示:本站所有文章,如无特殊说明或标注,均为何星星原创发布。与此同时,趋于近年来本站的文章内容频繁被他站盗用与机器采集,现已全局禁用网站文字内容操作,了解详情或转载文章请 点此 继续!

0 条评论

发表回复

Avatar placeholder

您的电子邮箱地址不会被公开。 必填项已用 * 标注