如何在 CSS 中导入字体？答案

【问题标题】：How to import fonts in CSS?如何在 CSS 中导入字体？
【发布时间】：2012-07-29 01:06:05
【问题描述】：

我想使用一些字体，并且我希望它能够在客户端计算机上没有这种字体的情况下工作。我已经这样做了，但它不起作用：

@font-face {
    font-family: EntezareZohoor2;
    src: url(Entezar2.ttf) format("truetype");
}

.EntezarFont {
    font-family: EntezareZohoor2, B Nazanin, Tahoma !important;
}

【问题讨论】：

Embed是指将字体源注入到html中，而不是仅仅引用它。

标签： css fonts

【解决方案1】：

当我使用 Google 字体时，他们给我的只是真正的字体文件 .ttf，并且根本没有解释如何使用 @font-face 将它们包含到我的文档中。我也尝试了 font squirrel 的网络字体生成器，它只是一直在运行加载 gif 并且不工作......然后我找到了这个网站 -

https://transfonter.org/

我使用以下方法取得了巨大的成功：

我选择了添加字体按钮，保留默认选项，添加了我所有的.ttf，谷歌给了我Open Sans（大概是10个，我选择了很多选项。 ..)。

然后我选择了转换按钮。

这是最好的部分！

他们给了我一个 zip 文件，其中包含我选择的所有字体格式文件 .ttf、.woff 和 .eot。在那个 zip 文件中，他们有一个 demo.html 文件，我只是双击它，它在我的浏览器中打开了一个网页，向我展示了所有不同 css 字体选项的示例用法、如何实现它们以及它们的外观等.

@font-face

此时我仍然不知道如何使用@font-face 正确地将字体包含到我的样式表中，但后来我注意到这个demo.html 在压缩包中也带有它自己的样式表。我打开了样式表，它显示了如何使用 @font-face 引入所有字体，因此我能够快速轻松地将 this 复制粘贴到我的项目中 -

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/Open_Sans/OpenSans-BoldItalic.eot');
    src: url('fonts/Open_Sans/OpenSans-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Open_Sans/OpenSans-BoldItalic.woff') format('woff'),
        url('fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/Open_Sans/OpenSans-LightItalic.eot');
    src: url('fonts/Open_Sans/OpenSans-LightItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Open_Sans/OpenSans-LightItalic.woff') format('woff'),
        url('fonts/Open_Sans/OpenSans-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/Open_Sans/OpenSans-SemiBold.eot');
    src: url('fonts/Open_Sans/OpenSans-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Open_Sans/OpenSans-SemiBold.woff') format('woff'),
        url('fonts/Open_Sans/OpenSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/Open_Sans/OpenSans-Regular.eot');
    src: url('fonts/Open_Sans/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Open_Sans/OpenSans-Regular.woff') format('woff'),
        url('fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/Open_Sans/OpenSans-Light.eot');
    src: url('fonts/Open_Sans/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/Open_Sans/OpenSans-Light.woff') format('woff'),
        url('fonts/Open_Sans/OpenSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/Open_Sans/OpenSans-Italic.eot');
    src: url('fonts/Open_Sans/OpenSans-Italic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Open_Sans/OpenSans-Italic.woff') format('woff'),
        url('fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/Open_Sans/OpenSans-SemiBoldItalic.eot');
    src: url('fonts/Open_Sans/OpenSans-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Open_Sans/OpenSans-SemiBoldItalic.woff') format('woff'),
        url('fonts/Open_Sans/OpenSans-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/Open_Sans/OpenSans-ExtraBold.eot');
    src: url('fonts/Open_Sans/OpenSans-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Open_Sans/OpenSans-ExtraBold.woff') format('woff'),
        url('fonts/Open_Sans/OpenSans-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.eot');
    src: url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.woff') format('woff'),
        url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/Open_Sans/OpenSans-Bold.eot');
    src: url('fonts/Open_Sans/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Open_Sans/OpenSans-Bold.woff') format('woff'),
        url('fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

demo.html 也有它自己的内联样式表，看起来很有趣，虽然我熟悉使用字体粗细和样式，所以我不需要太多。有关如何在 html 元素上实现字体样式以供参考的示例，您可以在 @font-face 正确使用后在类似的情况下使用以下方法进行挖掘 -

html, body{
    margin: 0;
    font-family: 'Open Sans';
}
.banner h1{
    font-size: 43px;
    font-weight: 700;
}
.banner p{
    font-size: 24px;
    font-weight: 300;
    font-style: italic;
}

【讨论】：

【解决方案2】：

我像这样使用了 Ataturk 的字体。我没有使用“TTF”版本。我将原始字体版本（“otf”版本）翻译成“eot”和“woof”版本。然后它在本地工作，但当我将文件上传到服务器时不起作用。所以我也像这样添加了“TTF”版本。现在，它可以在 Chrome 和 Firefox 上运行，但 Internet Explorer 仍然可以防御。当您在计算机上安装“Ataturk”字体时，也可以使用 IE。但我想在不安装的情况下使用这种字体。

@font-face {
    font-family: 'Ataturk';
    font-style: normal;
    font-weight: normal;
    src: url('font/ataturk.eot');
    src: local('Ataturk Regular'), url('font/ataturk.ttf') format('truetype'), 
    url('font/ataturk.woff') format('woff');
}

你可以在我的网站上看到它：http://www.canotur.com

【讨论】：

你好；我在下面的第二个“src”部分添加了这个，它现在可以工作了：“url（'font/ataturk.eot?iefix'）格式（'opentype'）”你可以检查：www.canotur.com

【解决方案3】：

关于此主题的最佳信息来源之一是 Paul Irish 的 Bulletproof @font-face syntax 文章。

阅读它，你会以这样的方式结束：

/* definition */
@font-face {
  font-family: EntezareZohoor2;
  src: url('fonts/EntezareZohoor2.eot');
  src: url('fonts/EntezareZohoor2.eot?') format('☺'),
       url('fonts/EntezareZohoor2.woff') format('woff'),
       url('fonts/EntezareZohoor2.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* use */
body {
    font-family: EntezareZohoor2, Tahoma, serif;
}

【讨论】：

【解决方案4】：

以下几行用于在 css 中定义字体

@font-face {
    font-family: 'EntezareZohoor2';
    src: url('fonts/EntezareZohoor2.eot'), url('fonts/EntezareZohoor2.ttf') format('truetype'), url('fonts/EntezareZohoor2.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

在css中定义/使用字体

#newfont{
    font-family:'EntezareZohoor2';
}

【讨论】：

font-family 属性更改为 EntezarZohoor2 但无法加载
你检查过可用字体的路径吗？
哦，我只有 ttf 文件...是否需要所有格式？？像eot之类的？？？
强烈推荐 fontsquirrel.com/tools/webfont-generator 用于转换网页字体和生成 CSS。

【解决方案5】：

试试这个link1,link2

@font-face {
        font-family: 'RieslingRegular';
        src: url('fonts/riesling.eot');
        src: local('Riesling Regular'), local('Riesling'), url('fonts/riesling.ttf')                       format('truetype');
    }

【讨论】：

font-family 属性更改为 EntezarZohoor2 但无法加载
当我在浏览器地址栏中输入路径时，它将正确下载字体，因此路径正确

【解决方案6】：

通过http://www.w3.org/TR/css3-fonts/

试试这个：

  @font-face {
        font-family: 'EntezareZohoor2';
        src: url('EntezareZohoor2.eot');
        src: local('EntezareZohoor2'), local('EntezareZohoor2'), url('EntezareZohoor2.ttf') format('svg');
       font-weight: normal;
       font-style: normal;
    }

【讨论】：

font-family 属性更改为 EntezarZohoor2 但无法加载
你检查你的路径了吗？如果路径正确，则使用任何其他font-family 进行检查。
是的，我检查了路径是否正确，当我在浏览器中输入路径时，它开始下载字体文件