html使用CSS设置谷歌字体

82次阅读
没有评论

CSS可以通过引用谷歌字体库来设置谷歌字体。谷歌字体库提供了大量的免费字体,可以供Web开发人员使用。以下是设置谷歌字体的详细说明:

  1. 在HTML文件的<head>标签中引入谷歌字体库

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

将Font+Name替换为您想要使用的字体名称,例如Open+Sans。

  1. 在CSS文件中使用谷歌字体

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

将Font+Name替换为您在步骤1中选择的字体名称。

  1. 在HTML文件中使用谷歌字体

<h1 style="font-family: 'Font Name', sans-serif;">Hello, World!</h1>

将Font+Name替换为您在步骤1中选择的字体名称。

4.完整示例代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <style>
        body {
            font-family: 'Open Sans', sans-serif;
        }
    </style>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>

在上面的示例中,我们在头部 <head> 中引入了 Open Sans 字体的样式表,然后在样式中使用 font-family 属性指定使用该字体。如果需要使用多个字体,则可以在 font-family 属性中指定多个字体的名称,以逗号分隔。font-family: ‘Open Sans’, sans-serif,的意思就是设置字体为Open Sans,如果找不到Open Sans就使用sans-serif

5.Google常用字体

  1. Open Sans
  2. Roboto
  3. Lato
  4. Montserrat
  5. Raleway
  6. Source Sans Pro
  7. Ubuntu
  8. Noto Sans
  9. PT Sans
  10. Oswald
  11. Merriweather
  12. Poppins
  13. Playfair Display
  14. Quicksand
  15. Roboto Condensed
  16. Comfortaa
  17. Dosis
  18. Fira Sans
  19. Titillium Web
  20. Vollkorn

 

正文完
 
评论(没有评论)