如何使用CSS将“Ubuntu Font Family”添加到我的网站？

Question

如何在我的网站的CSS编辑器中添加Ubuntu字体系列？这是我已经拥有的字体和标题，但不想要我当前的字体，我想要Ubuntu字体。

/* ##### Common Styles ##### */

body {
  color: black;
  background-color: white;
  font-family: "times new roman", times, roman, serif;
  font-size: 12pt;
  margin: 0;
  padding: 0;
}

acronym, .titleTip {
  font-style: italic;
  border-bottom: none;
}

或

/* ##### Header ##### */

#header {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid black;
}

.headerTitle {
  font-size: 200%;
  margin: 0;
  padding: 0 0 0.5ex 0;
}

.headerTitle a {
  color: black;
  background-color: transparent;
  font-family: "trebuchet ms", verdana, helvetica, arial, sans-serif;
  font-weight: normal;
  text-decoration: none;
}

.subHeader {
  display: none;
}


/* ##### Side Bars ##### */

#side-bar {
  display: none;
}


/* ##### Main Copy ##### */

#main-copy {
  text-align: justify;
  margin: 0;
  padding: 0;
}

#main-copy h1 {
  font-family: "trebuchet ms", verdana, helvetica, arial, sans-serif;
  font-size: 120%;
  margin: 2ex 0 1ex 0;
  padding: 0;

我在哪里添加Ubuntu字体系列？我是否插入了错误的代码来帮助你，帮助我？

Answer 1

导入字体

首先，您必须确保您的网站具有该字体，以防普通用户访问您的网站时没有。

选项1 - 从外部提供商导入

您可以从Google字体等外部字体主机导入整个字体文件和设置。只需将此代码放在HTML中即可从外部导入：

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">

选项2 - 将其存储在您的服务器中

您可以下载然后将字体文件上传到您的服务器，然后通过CSS中的@font-face导入它们。在此示例中，字体文件的位置为http://example.com/fonts/ubuntu.woff。

@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    src: local('Ubuntu'), url(http://example.com/fonts/ubuntu.woff) format('woff');
}

使用字体

然后你必须指定你想在哪里使用那种字体。只需将Ubuntu添加到您的font-family列表中：

body {
    font-family: Ubuntu, "times new roman", times, roman, serif;
}

此示例代码将为HTML页面中的每个文本提供Ubuntu字体（如果可用）。