css - 在 Angular.js (.ttf) 中包含字体

Question

我有一个 .ttf 字体文件，我需要在我的 Angular.js 应用程序中使用它。我不知道如何导入它并在我的 css 文件中访问它。

有人可以指导我将这个字体文件与 Angular/CSS 一起使用吗？

Answer 1

包含字体与 angularjs 无关。您必须在 CSS 文件中声明它:

以我自己的这 block 为例，在样式表中声明:

@font-face {
font-family: 'Durant';
src: url('../fonts/DurantBold.eot'); /* IE9 Compat Modes */
src: url('../fonts/DurantBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('../fonts/DurantBold.otf') format('opentype'), /* Legacy iOS */
     url('../fonts/DurantBold.svg#Durant-Bold') format('svg'), /* Legacy iOS */
     url('../fonts/DurantBold.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('../fonts/DurantBold.woff') format('woff');
font-weight: bold;
}

请记住，路径是相对于 css 文件的。

如今，大多数浏览器都支持大多数文件格式 - 具体而言，我不知道浏览器和字体之间的不兼容性。这种风格有点老了。

此外，我有所有这些文件(每种字体、每种格式、每种粗细变化、每种样式变化 1 个文件 - 非常令人沮丧)。您将不会包含您没有的文件的配置。

如果您只有 .ttf 文件，您只需要在 .css 文件中添加以下片段:

@font-face {
font-family: 'Durant';
src: url('../fonts/DurantBold.ttf')  format('truetype');
font-weight: bold;
}

记住在您将使用它的页面中实际包含您声明此 block 的 css 文件。如果您使用状态 (ngRouter/ui.router)，则将字体包含在主页面中，而不是部分页面中。

记住将字体文件 (.ttf) 放在可通过此 css 文件中的声明访问的位置:

• 绝对 URL/CDN:无需解释。
• 相对站点 url:以/开头的路径指的是相对于文档根目录的路径，一如既往。
• 相对url:不以/开头的路径是相对于当前css文件。

我知道我写过很多次，但忘记时总是很头疼。