webfont_制作自己的Webfont

webfont

There are many ways to find the perfect typeface for your site design: buying a font from a professional subscription service such as Typekit, Fonts.com or Webtype; finding a free font online, or making your own from scratch. In this article, I’ll focus on the latter two options.

有很多方法可以找到您的网站设计完美的字样：购买从专业的订阅服务，如字体Typekit ， Fonts.com或Webtype ; 在线查找免费字体，或从头开始制作自己的字体。 在本文中，我将重点介绍后两个选项。

While free fonts are common, it’s rare that they will be provided in all the formats that you need to embed it successfully across multiple browsers and platforms. To achieve this you must use a conversion tool: we’re going to use FontSquirrel in this lesson, but there are alternatives that I’ll discuss at the end of this article.

尽管免费字体很常见，但很少会提供将其成功嵌入到多个浏览器和平台中所需的所有格式的字体。 为此，您必须使用转换工具：在本课程中，我们将使用FontSquirrel ，但在本文结尾处将讨论一些替代方法。

Before proceeding, ensure that you have the legal right to embed the font. Your rights to the typeface will be made clear in the licensing agreement that came with the typeface. If you’re not completely certain, don’t presume you have the right to convert the font. For this example, we’re going to use the Calluna Sans typeface by Jos Buivenga ( exljbris.com), of which the Regular version is free. Reading the EULA for the font makes it clear that the only credit Jos requires for his excellent work is the one I’ve just provided.

在继续之前，请确保您具有嵌入字体的合法权利 。 您对字体的权利将在字体随附的许可协议中阐明。 如果您不确定， 请不要假定您有权转换字体 。 在此示例中，我们将使用Jos Buivenga( exljbris.com )的Calluna Sans字体，其中Regular版本是免费的。 阅读该字体的EULA可以清楚地看出，Jos出色的工作所需要的唯一荣誉就是我刚刚提供的。

I’ve downloaded the OTF (“desktop”) version of the font from FontSpring for free. In the case of Calluna Sans the company also provides a prepackaged webfont collection, but we’re going to go through the complete process of making the webfonts for ourselves, with some bonus tweaks and features.

我已经从FontSpring免费下载了该字体的OTF (“桌面”)版本。 对于Calluna Sans，该公司还提供了预打包的webfont集合，但是我们将通过一些额外的调整和功能来完成为自己制作webfonts的完整过程。

For the conversion, we’re going to turn to

FontSquirrel’s @font-face kit generator. FontSquirrel asks us to add the font file we wish to convert (the CallunaSansRegular.otf file we downloaded earlier), the processing we wish ( Basic, Optimal or Expert – the center option is fine) and if the font we’re uploading is legally eligible for embedding. With those three steps completed, the service prompts us to download the completed kit.

FontSquirrel的@ font-face kit generator 。 FontSquirrel要求我们添加我们想要转换的字体文件(我们之前下载的CallunaSansRegular.otf文件)，我们希望的处理( 基本 ， 最佳或专家 –中心选项很好)，以及我们要上传的字体是否合法有资格嵌入。 完成这三个步骤后，服务会提示我们下载完整的套件。

In return, FontSquirrel provides us with a .zip file with the following content:

作为回报，FontSquirrel为我们提供了一个包含以下内容的.zip文件：

• A demo page showing the converted font successfully embedded in an HTML document, including samples and instructions.
  一个演示页面，显示成功嵌入HTML文档中的转换后的字体，包括示例和说明。

• The font we uploaded, converted into several formats (.eot, .svg, .ttf and .woff) for embedding on different systems

  我们上传的字体已转换为多种格式( .eot ， .svg ， .ttf和.woff )，可嵌入到不同的系统中

• A generator file to recreate the settings we just used.
  一个生成器文件，用于重新创建我们刚刚使用的设置。
• A specimen files folder, containing resources for the demo page.
  样本文件文件夹，其中包含演示页面的资源。

• A stylesheet.css file with @font-face CSS code we will use to embed the font in our pages.

  一个带有@font-face CSS代码的stylesheet.css文件，我们将使用它在页面中嵌入字体。

There are three very important points to understand before you proceed:

1. Just like images and other resources used on your site, embedded fonts must be transferred the local folder that contains our site. Ultimately, those same fonts must be uploaded to the web hosting server to be used by your live web pages.

   就像您网站上使用的图像和其他资源一样，嵌入字体也必须转移到包含我们网站的本地文件夹中。 最终，必须将那些相同的字体上载到Web托管服务器，以供实时网页使用。

2. In the generated CSS FontSquirrel has assumed that the fonts will be located directly beside your HTML pages. In most cases, that is incorrect – instead, the fonts will be located in a folder inside your site.

   在生成的CSS中， FontSquirrel假定字体将直接位于HTML页面的旁边。 在大多数情况下，这是不正确的 -字体将位于站点内的文件夹中。

3. While the provided stylesheet is good, there are two significant improvements that we can make that will improve quality of the rendered font on many systems.
   虽然所提供的样式表不错，但我们可以进行两项重大改进，以改善许多系统上渲染字体的质量。

第1步 (Step 1)

Move the fonts to their new location. Usually that will be in a

fonts folder, located inside the assets folder of your site. Transfer the converted fonts, along with the original OTF file, to that location. You may also wish to change the filenames, removing the regular–webfont suffix from each.

资产文件夹内的字体文件夹中。 将转换后的字体以及原始的OTF文件传输到该位置。 您可能还希望更改文件名，从每个文件名中删除常规的webfont后缀。

第2步 (Step 2)

We need to alter the CSS that FontSquirrel has provided us to reflect the new position of the fonts, and make two additions. Open the stylesheet.css file provided by FontSquirrel, copy the code, and paste it into the top of your site’s own stylesheet.

我们需要更改FontSquirrel提供给我们的CSS以反映字体的新位置，并添加两个。 打开FontSquirrel提供的stylesheet.css文件，复制代码，然后将其粘贴到站点自己的样式表的顶部。

The original code looks like this:

原始代码如下所示：

@font-face {
	font-family: 'calluna_sansregular';
	src: url('callunasansregular-webfont.eot');
	src: url('callunasansregular-webfont.eot?#iefix') format('embedded-opentype'),
	url('callunasansregular-webfont.woff') format('woff'),
	url('callunasansregular-webfont.ttf') format('truetype'),
	url('callunasansregular-webfont.svg#calluna_sansregular') format('svg');
	font-weight: normal;
	font-style: normal;
}

We’re going to change the font-family name to make it easier to reference, fix the filenames and locations, remove font formats that are no longer required in modern browsers, and provide a few new lines of code to improve rendering. The CSS changes to:

我们将更改font-family名称，以使其更易于引用，修复文件名和位置，删除现代浏览器不再需要的字体格式，并提供一些新的代码行来改善呈现效果。 CSS更改为：

@font-face {
	font-family: 'Calluna Sans';
	src: local('Calluna Sans');
	src: url('callunasans.woff') format('woff'),
	font-weight: normal;
	font-style: normal;
}
body {
	font-family: 'Calluna Sans', sans-serif;
}

In the CSS we’ve added a local option so that if the font is installed on the user’s system, they use that copy, rather than downloading ours, speeding up page rendering time. The result is a high-quality embedded font that will appear on all browsers and platforms.

在CSS中，我们添加了一个本地选项，因此，如果在用户系统上安装了字体，则他们将使用该副本，而不是下载我们的副本，从而加快了页面渲染时间。 结果是高质量的嵌入式字体将出现在所有浏览器和平台上。

其他资源 (Other Resources)

FontSquirrel may be the most popular and handy conversion service, but it’s not the only one: other options include FontPrep for Mac, and css3FontConverter, a command-line tool for all platforms.

FontSquirrel可能是最流行的和方便的转换服务，但它不是唯一的一个：其他选项包括FontPrep for Mac和css3FontConverter ，适用于所有平台的命令行工具。

翻译自: https://thenewcode.com/623/Make-Your-Own-Webfont

webfont