使用CSS自定义字体？ [英] Using custom fonts using CSS?

问题描述

我看过一些新网站在其网站上使用自定义字体（非常规Arial，Tahoma等）。

不错的浏览器数量。

这是怎么做的？

解决方案

通常，您可以使用自定义字体 @ font-face 。这是一个非常基本的例子：

  @ font-face {
 font-family：'YourFontName'; / *稍后使用的名称* / 
 src：url（'http://domain.com/fonts/font.ttf'）; / * URL to font * / 
} 
  

特定元素：

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

（ .classname 是您的选择器）。

请注意，某些字体格式不适用于所有浏览器;您可以使用 fontsquirrel.com 的发电机，以避免太多的精力转换。 p>

您可以找到一组由提供的免费网络字体Google字体（也有自动生成的CSS @ font-face 规则，因此您不必自己编写）。

，同时也阻止了人们可以免费下载字体

不，不可能使用通过CSS嵌入的自定义字体为文本设计样式，同时防止人们下载它。您需要使用图片，Flash或 HTML5 Canvas ，所有这些都不是很实用。

我希望得到帮助！

I've seen some new websites that are using custom fonts on their sites (other than the regular Arial, Tahoma, etc.).

And they support a nice amount of browsers.

How does one do that? While also preventing people from having free access to download the font, if possible.

解决方案

Generically, you can use a custom font using @font-face in your CSS. Here's a very basic example:

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

Then, trivially, to use the font on a specific element:

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

(.classname is your selector).

Note that certain font-formats don't work on all browsers; you can use fontsquirrel.com's generator to avoid too much effort converting.

You can find a nice set of free web-fonts provided by Google Fonts (also has auto-generated CSS @font-face rules, so you don't have to write your own).

while also preventing people from having free access to download the font, if possible

Nope, it isn't possible to style your text with a custom font embedded via CSS, while preventing people from downloading it. You need to use images, Flash, or the HTML5 Canvas, all of which aren't very practical.

I hope that helped!

这篇关于使用CSS自定义字体？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！