使用@ font-face规则

时间:2017-11-28 14:47:55

标签: html css google-fonts

div h2 {
  text-align: center;
  color: white;
  padding: 0px 20px 0px 20px;
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 300;
  src: local('Exo 2 Light'), local('Exo2-Light'), url(https://fonts.gstatic.com/s/exo2/v4/TZlHHgxEfHXA7uKM1eaCjXYhjbSpvc47ee6xR_80Hnw.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;
}
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 400;
  src: local('Exo 2'), local('Exo2-Regular'), url(https://fonts.gstatic.com/s/exo2/v4/mJrGVjHbrdshrbGyvd7vdaCWcynf_cDxXwCLxiixG1c.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;
}

我正在尝试使用谷歌字体,我也将它链接在我的html文件中,如下所示:

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

不幸的是,在我添加了字体样式后,文本没有显示出来。我如何做到这一点有什么问题吗?

感谢您的帮助。

2 个答案:

答案 0 :(得分:0)

如谷歌字体网站所述,当您包含链接标记时,您必须指定字体

  

在CSS中指定

     

使用以下CSS规则指定这些系列:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/patientDOBBlock"
tools:text="Test Navigation Text"
android:layout_above = "@+id/navigation"/>

<include
android:id="@id/navigation"
android:layout_alignParentBottom = "true"
layout="@layout/bottom_navigation"
android:layout_height="66dp"
android:layout_width="match_parent"
/>
</RelativeLayout>
  

有关如何将字体添加到网页的示例,请参阅入门指南。

所以在你的CSS中你只需添加:

font-family: 'Exo 2', sans-serif;

答案 1 :(得分:0)

也许您的浏览器不支持woff2字体