如何在CSS中embedded字体？

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

@font-face { font-family: EntezareZohoor2; src: url(Entezar2.ttf) format("truetype"); } .EntezarFont{ font-family: EntezareZohoor2, B Nazanin, Tahoma !important; } 

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

Answer 2

关于这个主题的最好的信息来源之一是Paul Irish的Bulletproof @ font-face语法文章。

阅读它，你将以类似于以下内容结束：

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

Answer 3

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

Answer 4

试试这个link1 ， link2

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

Answer 5

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

Answer 6

当我去Google字体时，他们给我的都是真正的字体文件.ttf ，并没有解释如何使用@ font-face将它们包含到我的文档中。 我试过从字体松鼠的Web字体发生器，这只是继续运行加载GIF和不工作…然后，我发现这个网站 –

https://transfonter.org/

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

我select了添加字体button，保留默认选项，添加了Google给我Open Sans所有.ttf （这就像10，我select了很多选项…）。

然后我select了转换button。

inheritance人最好的部分！

他们给了我一个zip文件，包含我select的所有字体格式文件， .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; }