如何在CSS中导入字体？

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

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

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

---

关于这个话题的最好的信息来源之一是Paul Irish的文章

阅读后，您将以以下内容结束：

/* 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;
}

通过

试试这个：

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

---

以下行用于定义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;
}

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

以下几行定义/使用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;
}

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

试试这个

---

我用了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');
}

---

你可以在我的网站上看到：

当我去谷歌字体时，他们给我的都是真字型字体文件

.ttf

，并且根本没有解释如何使用@font-face将它们包含到我的文档中。我也尝试了FontSquirrel的web字体生成器，它只是一直在运行加载gif而不工作。。。然后我发现这个网站——

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

我选择了添加字体按钮，保留了默认选项，添加了我的所有

.ttf

，谷歌给我的

opensans

（大概是10个，我选择了很多选项…）

然后我选择了转换按钮

这是最好的部分

他们给了我一个包含我选择的所有字体格式文件的zip文件，

.ttf

，

.woff

和

.eot

。在这个zip文件中，他们有一个

demo.html

文件，我刚刚双击了它，它在我的浏览器中打开了一个网页，向我展示了所有不同css字体选项的示例用法，如何实现它们，以及它们的外观等等

@font-face

此时我仍然不知道如何使用

@font-face

将字体正确地包含到我的样式表中，但后来我注意到这个

demo.html

也附带了它自己的样式表。我打开样式表，它显示了如何使用

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

---

字体族属性更改为EntezarZohoor2，但无法加载。是否检查路径？如果路径正确，则使用任何其他

字体系列检查它。是的，我已经检查了路径是否正确，当我在浏览器中输入路径时，它开始下载字体文件字体系列属性更改为EntezarZohoor2，但它无法加载，因为您没有检查可用字体的路径。哦，我只有ttf文件。。。它需要所有格式吗？？？？如eot或其他？？？强烈建议用于转换web字体和生成CSS。字体族属性更改为EntezarZohoor2，但无法加载。当我在浏览器地址栏中输入路径时，它将正确下载字体，因此路径正确
嵌入
指将字体源注入html，但不仅仅是参考它；我在下面的第二个“src”部分中添加了这一点，现在可以使用了：“url（'font/ataturk.eot？iefix'）格式（'opentype'）”，您可以查看：www.canotur.com