时间戳

首页 > 解决方案 > 无法通过 CSS 使用字体

html - 无法通过 CSS 使用字体

问题描述

我有这个免费的谷歌字体的 CSS 文件。字体和帮助已下载，但我无法按预期使用它们。如何使用它们显示粗体或斜体或常规文本？

我的 CSS：fonts.css

        /* anonymous-pro-regular - latin */
    @font-face {
      font-family: 'Anonymous Pro';
      font-style: normal;
      font-weight: 400;
      src: local('Anonymous Pro Regular'), local('AnonymousPro-Regular'),
           url('../fonts/anonymous-pro-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
           url('../fonts/anonymous-pro-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
           url('../fonts/anonymous-pro-v11-latin-regular.ttf') format('truetype'); /* Safari, Android, iOS */
    }

    /* anonymous-pro-italic - latin */
    @font-face {
      font-family: 'Anonymous Pro';
      font-style: italic;
      font-weight: 400;
      src: local('Anonymous Pro Italic'), local('AnonymousPro-Italic'),
           url('../fonts/anonymous-pro-v11-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
           url('../fonts/anonymous-pro-v11-latin-italic.woff') format('woff'), /* Modern Browsers */
           url('../fonts/anonymous-pro-v11-latin-italic.ttf') format('truetype'); /* Safari, Android, iOS */
    }

    /* anonymous-pro-700 - latin */
    @font-face {
      font-family: 'Anonymous Pro';
      font-style: normal;
      font-weight: 700;
      src: local('Anonymous Pro Bold'), local('AnonymousPro-Bold'),
           url('../fonts/anonymous-pro-v11-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
           url('../fonts/anonymous-pro-v11-latin-700.woff') format('woff'), /* Modern Browsers */
           url('../fonts/anonymous-pro-v11-latin-700.ttf') format('truetype'); /* Safari, Android, iOS */
    }

    /* anonymous-pro-700italic - latin */
    @font-face {
      font-family: 'Anonymous Pro';
      font-style: italic;
      font-weight: 700;
      src: local('Anonymous Pro Bold Italic'), local('AnonymousPro-BoldItalic'),
           url('../fonts/anonymous-pro-v11-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
           url('../fonts/anonymous-pro-v11-latin-700italic.woff') format('woff'), /* Modern Browsers */
           url('../fonts/anonymous-pro-v11-latin-700italic.ttf') format('truetype'); /* Safari, Android, iOS */
    }


.myFontNormal {
  font-family: 'Anonymous Pro Regular';
}

.myFontBold {
  font-family: 'Anonymous Pro Bold';
  font-size: 15px;
}

当我尝试在表单中使用它时，它什么也不做。我错过了什么？

例如：

<div id="main" class="myFontBold">
  <p>Default Emb.1234567890.</p>
</div>

标签： htmlcssfonts

解决方案

在@font-face 规则中使用不同font-family的名称以使其工作 - 你拥有font-family: 'Anonymous Pro';这三个！在第二个和第三个中添加“粗体”和“斜体”。

推荐阅读