如何使用Google字体中的链接使用常规,浅色和粗体字体?

时间:2018-09-24 09:18:15

标签: css google-fonts

我需要三种类型的Ubuntu字体。我不想下载它们。

我将此链接放在标记中: <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,700" rel="stylesheet">

在Google教程中:“使用以下CSS规则指定这些系列:font-family:'Ubuntu',sans-serif;“。

如何使用Ubuntu Light和Ubuntu粗体字体?如我所见,它与font-weight: bold不同;或font-weight: 300;。

2 个答案:

答案 0 :(得分:4)

这是在tbody div { display: table-row; } tbody div span{ display: block; text-align: center; width: 100%; } 标签中使用的链接:

<head>

在您的CSS文件中使用:

<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,700" rel="stylesheet">

font-family: 'Ubuntu', sans-serif;

答案 1 :(得分:1)

字体粗细300等于光, 400为常规,500为中等。 您应该在链接中添加浅色和中等字体,如

链接到Google字体:

<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500" rel="stylesheet"/>

css:

body {
  font-family: 'Ubuntu', sans-serif;
 }
.light {
  font-weight:300; 
 }
.regular{
  font-weight:400; 
}

.medium{
  font-weight:500; 
   }

工作代码:https://codepen.io/peker-ercan/pen/bxyEdK