如何在CSS中导入字体？

Question

我想使用一些字体，但希望在客户端计算机上没有这个字体也能够工作。我已经尝试过，但是它不起作用：

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

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

- Mohammad

---

“Embed” 指将字体源代码注入到 HTML 中，而不仅仅是引用它。 - Alfonso de la Osa

Answer 1

以下是在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';
}

- Suresh kumar

---

字体家族属性更改为EntezarZohoor2，但无法加载它。 - Mohammad

你检查了可用字体的路径吗？ - Suresh kumar

哦，我只有ttf文件...需要拥有所有格式吗？比如eot或等等？ - Mohammad

强烈推荐使用http://www.fontsquirrel.com/tools/webfont-generator来将字体转换为Web字体并生成CSS。 - Patrick

Answer 2

在这个主题上最好的信息来源之一是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;
}

- Yannick Blondeau

Answer 3

当我去Google fonts网站时，他们只给了我TrueType字体文件 .ttf，并没有解释如何使用@font-face将它们包含到我的文档中。我也尝试使用来自Font Squirrel的Web字体生成器，但它一直在运行加载gif图像而无法工作...然后我找到了这个网站-

https://transfonter.org/

我使用以下方法取得了很好的效果:

我选择了添加字体按钮，保留默认选项，添加了所有Google为Open Sans提供的.ttf文件（大约有10个，我选择了很多选项...）。

然后我选择了转换按钮。

以下是最好的部分！

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

@font-face

此时我仍然不知道如何使用@font-face将字体正确地包含到我的样式表中，但是我注意到这个demo.html还有一个zip文件自带的样式表。我打开了样式表，它展示了如何使用@font-face引入所有字体，因此我能够快速、轻松地将这段代码复制粘贴到我的项目中-

@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;
}

- kiko carisse

Answer 4

请浏览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;
    }

- RAN

---

字体家族属性更改为EntezarZohoor2，但无法加载它。 - Mohammad

你检查了路径吗？如果路径正确，那么请使用其他的 font-family 进行检查。 - RAN

我已经检查了路径，它是正确的。当我在浏览器中输入路径时，它开始下载字体文件。 - Mohammad

Answer 5

可以尝试这个链接1，以及这个链接2

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

- Prashobh

---

字体家族属性更改为EntezarZohoor2，但无法加载它。 - Mohammad

当我在浏览器地址栏中输入路径时，它会正确下载字体，因此路径是正确的。 - Mohammad

Answer 6

我使用了阿塔图尔克字体，但没有使用“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

- Can OTUR

---

你好； 我在第二个“src”部分添加了以下内容，现在它可以工作了： "url('font/ataturk.eot?iefix') format('opentype')"你可以查看：www.canotur.com - Can OTUR