Question

我在这里找到了许多答案而没有注册，但是这个程序让我感到难过，所以我需要帮助。

几个星期前我发现了@ font-face和链接href方法，简单地说，我不知道如何使其工作。

我的加价：

HTML

<html>
<head>
    <title>ngFor</title>
    <script src="angular.js"></script>
  <link href="//cdnjs.cloudflare.com/ajax/libs/twitter- 
  bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
  <script 
  src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js">
  </script>
    <script 
   src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js">
   </script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>

 </head>
 <body>

        import {Component} from '@angular/core';

        interface Grocery {
          id: number;
          label: string;
        }

        @Component({
          selector: 'my-app',
          template: `
            <div>
              Grocery selected: {{ selectedGrocery.label }}
              <ul>
                <li *ngFor="let grocery of groceries; let i = index; trackBy: trackByGrocery;">
                  <a href="#" (click)="selectGrocery(grocery);">
                    {{ grocery.label }} {{ i }}
                  </a>
                </li>
              </ul>
            </div>
          `
        })
        export default class App {
          public groceries: Grocery[];
          constructor() {
            this.groceries = [{
              id: 0, label: 'Butter'
            },{
              id: 1, label: 'Apples'
            },{
              id: 2, label: 'Paprika'
            },{
              id: 3, label: 'Potatoes'
            },{
              id: 4, label: 'Oatmeal'
            },{
              id: 5, label: 'Spaghetti'
            },{
              id: 6, label: 'Pears'
            },{
              id: 7, label: 'Bacon'
            }];
            this.selectGrocery(this.groceries[0]);
          }
          selectGrocery(grocery: Grocery) {
            this.selectedGrocery = grocery;
          }
          trackByGrocery: (index: number, grocery: Grocery): number => 
    grocery.id;
        }

   </body>
  </html>

CSS

<!-- FONT FROM RBBT.NET USED ON THIS BOARD DESIGN //-->
<link href="http://rbbt.net/css?family=aspire-demibold" rel="stylesheet">

当我在此处访问留言板时，我的Android手机中显示特殊字体时，某些内容正常工作：http://bripples.runboard.com/

但是当我使用家用电脑时，字体不显示。我不知道是什么，如果有的话，我做错了。如何确定编码中正常工作的内容以及不希望的方式。有人可以向我解释这个并帮助我理解吗？提前谢谢。

Answer 1

在您的家庭计算机上打开CORS时出现问题URL。给定网站上不存在 Access-Control-Allow-Origin 标头，因此在 @fontface 中调用时无法加载字体。您可以尝试手动下载字体，将其存储在本地文件夹中，并在代码中使用该地址。

@font-face {
font-family: 'aspire-demibold';
src: url('../fonts/aspire-demibold.ttf')  format('truetype'), /* 
Safari, Android, iOS */
url('../fonts/aspire-demibold.woff') format('woff'); /* Modern 
Browsers */
}

请务必记住在您的网络服务器中将 ttf 和 woff 添加为 MIME类型。这肯定会奏效。

如何在CSS和HTML中正确链接ttf和/或woff文件？

1 个答案: