我的蒙特塞拉特字体未显示正确的字体样式

Question

我的蒙特塞拉特字体显示的样式不正确。这很正常。但是，如果我添加的样式在它要工作的链接，但我不希望一切相同的风格。像这样：

do something while condition 1 is true OR if condition 2 is true

这是链接，我想我的H1在被造型的蒙特塞拉特黑色，所以我说：

@app.route('/')
@app.route("/tables")
def show_tables():
    data = pd.read_csv('../../data/dummy_flask_data.csv')
    data = data[['modified_question', 'closest_transcript1', 
'closest_transcript2', 'closest_transcript3']]
    return render_template('view.html',tables=[data.to_html(classes = 
'transcripts')],
    titles = ['modified_question', 'closest_transcript1', 
'closest_transcript2', 'closest_transcript3'])

if __name__ == "__main__":
    app.run(debug=True)

但我没有看到效果。如果我这样添加它：

 <link href="https://fonts.googleapis.com/css?family=Montserrat|Ubuntu" rel="stylesheet"> 

在风格黑色将是所有在页面上，我希望它在仅H1所以请帮助我我怎么去了解它。

Answer 1

在google fonts中自定义字体并使用font-weight: 300 | 500 | 700 | 900：

h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900; /* black */
}

  
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700,900|Ubuntu:400,500,700" rel="stylesheet">
  
  <h1>
    Lorem ipsum dolor sit amet.
  </h1>

Answer 2

Google字体的字体粗细选择为：Montserrat:400,900等。 然后在CSS中指定要使用的重量。

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

h1 {
  font-weight: 900; /* Black */
}

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

<p>
  Normal body text
</p>

<h1>Black/ 900</h1>

Answer 3

您需要提及字体系列和字体粗细以获得您想要的实际大小 例子：

 h1{
font-family: 'Montserrat', sans-serif;
font-weight: 900;
 }

此外，请确保如果您使用的是外部 CSS 文件，则其链接应放置在 head 标签内的所有脚本和链接标签之后。简而言之，就在 head 标签的末尾。

  <link rel="stylesheet" href="css/styles.css">
  </head>

Answer 4

的字体的名称为Monserrat，{不{1}}。

Monserrat-black

h1 {
  font-family: 'Montserrat', sans-serif;
}

下面是从谷歌上的字体右下角的小弹出窗口中的代码：

Answer 5

font-family：“蒙特塞拉特”不再工作了。

所以你需要写： 字体家族：“蒙特塞拉特”； font-weight：字体粗细的值；

Answer 6

旧的Google字体系统早已不复存在。

h1 {
    font-family:  'Montserrat', sans-serif;
    font-size: 3rem; /*Optional*/
    line-height: 1.5; /*Optional*/
    font-weight: 900;
}

  <!--All weights  of Montserrat & Ubuntu are included here. You can also add /remove needed-->

  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">

  
  <h1>Meet new and interesting dogs nearby.</h1>
  <p> Normal Text is much smaller then desired Montserrat-Black</p>