JS动画. 如何添加和使用自定义字体
2015年12月3日
本教程展示了如何将任何自定义字体添加到您的 HTML based website 并将其应用于文本.
JS动画. 如何添加和使用自定义字体为了将自定义字体应用于网站的文本,您应该执行以下操作:
-
下载字体 Internet 或者直接从系统文件夹复制. 例如,Windows将其字体存储在 C:\Windows\Fonts directory. 确保字体格式是 TTF (TrueType字体)或 OTF (OpenType字体).
-
Go to Font 2 Web website,从本地系统中选择字体文件,然后点击 CONVERT&DOWNLOAD button:
-
你会得到一个拉链 archive. 我们需要 fonts folder and fonts.css 文件中的 archive:
-
上传的内容 fonts 文件夹到 /fonts/ directory 在服务器上. 确保文件的权限设置为 644:
-
Open up the fonts.css 文件,定位 url() 属性并更正它们的url fonts/XXX.xxx to ../fonts/XXX.xxx (在开头添加两个句号和一个正斜杠). 您还应该更改 font-family 属性以与文件名称一致:
-
Open up the /css/bootstrap.css 文件并向下滚动到最底部. 在那里,您需要粘贴从 fonts.css file.
-
方法将新字体应用于任何元素 font-family attribute. 您应该将以下代码添加到文件的最底部 /css/bootstrap.css
.navbar-nav > li { 字体类型:喜剧; }
.navbar-nav 元素是特定的吗? selector. 有时, font-family 属性可能已经在另一个文件中声明,并且 overwrite 你需要在代码中找到那个地方并把你的字体名代替,或者添加 important specifier:
.navbar-nav > li { 字体类型:喜剧 !important; }
结果代码应该是这样的:
-
将更改保存在 /css/bootstrap.css 文件并将其上传到服务器.
请随时查看下面的详细视频教程:
JS动画. 如何添加和使用自定义字体