JS动画. 如何添加和使用自定义字体

本教程展示了如何将任何自定义字体添加到您的 HTML based website 并将其应用于文本.

为了将自定义字体应用于网站的文本，您应该执行以下操作:

1. 下载字体 Internet 或者直接从系统文件夹复制. 例如，Windows将其字体存储在 C:\Windows\Fonts directory. 确保字体格式是 TTF (TrueType字体)或 OTF (OpenType字体).

2. Go to Font 2 Web website，从本地系统中选择字体文件，然后点击 CONVERT&DOWNLOAD button:

   

3. 你会得到一个拉链 archive. 我们需要 fonts folder and fonts.css 文件中的 archive:

   

4. 上传的内容 fonts 文件夹到 /fonts/ directory 在服务器上. 确保文件的权限设置为 644:

   

5. 打开 fonts.css 文件,定位 url() 属性并更正它们的url fonts/XXX.xxx to ../fonts/XXX.xxx (在开头添加两个句号和一个正斜杠). 您还应该更改 font-family 属性以与文件名称一致:

   

6. 打开 /css/bootstrap.css 文件并向下滚动到最底部. 在那里，您需要粘贴从 fonts.css file.

7. 方法将新字体应用于任何元素 font-family attribute. 您应该将以下代码添加到文件的最底部 /css/bootstrap.css

   			.navbar-nav > li {
   			字体类型:喜剧;
   			}
   		

   .navbar-nav 元素是特定的吗? selector. 有时, font-family 属性可能已经在另一个文件中声明，并且 overwrite 你需要在代码中找到那个地方并把你的字体名代替，或者添加 important specifier:

   			.navbar-nav > li {
   			字体类型:喜剧 !important;
   			}
   		

   结果代码应该是这样的:

   

8. 将更改保存在 /css/bootstrap.css 文件并将其上传到服务器.

请随时查看下面的详细视频教程: