使用自定义字体使用CSS?

我已经看到一些新的网站在他们的网站上使用自定义字体(除了常规的Arial,Tahoma等)。

他们支持很多浏览器。

一个人怎么做? 同时也阻止人们免费下载字体,如果可能的话。

通常,您可以在CSS中使用@font-face的自定义字体。 这是一个非常基本的例子:

 @font-face { font-family: 'YourFontName'; /*a name to be used later*/ src: url('http://domain.com/fonts/font.ttf'); /*URL to font*/ } 

然后,平凡地使用特定元素上的字体:

 .classname { font-family: 'YourFontName'; } 

.classname是你的select器)。

请注意,某些字体格式不适用于所有浏览器; 你可以使用fontsquirrel.com的生成器来避免太多的努力转换。

您可以find一组由Google字体提供的免费networking字体 (也有自动生成的CSS @font-face规则,所以您不必自行编写)。

同时如果可能的话还阻止人们免费下载字体

不,不可以通过CSSembedded自定义字体来设置文本风格,同时防止人们下载它。 您需要使用图片,Flash或HTML5 Canvas ,所有这些都不太实用。

我希望有帮助!

您必须下载字体文件并将其加载到CSS中。

Fe我在我的Web应用程序中使用了Yanone Kaffeesatz字体。

我通过加载和使用它

 @font-face { font-family: "Yanone Kaffeesatz"; src: url("../fonts/YanoneKaffeesatz-Regular.ttf"); } 

在我的样式表中。

要确保您的字体是跨浏览器兼容的,请确保您使用以下语法:

 @font-face { font-family: 'Comfortaa Regular'; src: url('Comfortaa.eot'); src: local('Comfortaa Regular'), local('Comfortaa'), url('Comfortaa.ttf') format('truetype'), url('Comfortaa.svg#font') format('svg'); } 

从这里采取。

如果您从Google.com/webfonts或fontsquirrel.com找不到任何您喜欢的字体,则可以使用您制作的字体制作自己的字体。

这里有一个很好的教程: 制作你自己的字体网页字体工具包

虽然我不知道阻止某人下载你的字体。

希望这可以帮助,

还有一个叫做CUFON的有趣工具。 有一个如何在这个博客中使用它的演示这真的很简单和有趣。 另外,它不允许人们按ctrl + c / ctrl + v生成的内容。

我在Win 8上工作,使用这个代码。 它适用于IE和FF,Opera等。我所了解的是:woff字体在Google字体上很常见。

去这里把你的ttf字体转换成woff之前。

 @font-face { font-family:'Open Sans'; src:url('OpenSans-Regular.woff'); } 

今天在网上有四种字体容器格式: EOT, TTF, WOFF,WOFF2.

不幸的是,尽pipeselect范围广泛,但并没有一种适用于所有新旧浏览器的通用格式:

  • EOT只是IE,
  • TTF有部分IE支持,
  • WOFF享有最广泛的支持,但在一些较旧的浏览器中不可用
  • WOFF 2.0支持是许多浏览器正在进行的工作。

如果您希望您的networking应用在所有浏览器中具有相同的字体,那么您可能希望在CSS中提供所有4种字体types

  @font-face { font-family: 'besom'; !important src: url('fonts/besom/besom.eot'); src: url('fonts/besom/besom.eot?#iefix') format('embedded-opentype'), url('fonts/besom/besom.woff2') format('woff2'), url('fonts/besom/besom.woff') format('woff'), url('fonts/besom/besom.ttf') format('truetype'), url('fonts/besom/besom.svg#besom_2regular') format('svg'); font-weight: normal; font-style: normal; }