我使用了一个名为“幻觉记忆三世”字体并不在谷歌字体存在对我的网站使用自定义字体有什么好处?
body{
font-family:'DejaVu Sans' , tahoma;
}
我上传的扩展名不同的到我的网站的字体,但它需要时间来对文本执行我的网站,我认为它等待整个网站加载第一。
将字体文件上传到CDN或文件云,然后在我的网站上使用它,还是有更好的方法是更好?
我使用了一个名为“幻觉记忆三世”字体并不在谷歌字体存在对我的网站使用自定义字体有什么好处?
body{
font-family:'DejaVu Sans' , tahoma;
}
我上传的扩展名不同的到我的网站的字体,但它需要时间来对文本执行我的网站,我认为它等待整个网站加载第一。
将字体文件上传到CDN或文件云,然后在我的网站上使用它,还是有更好的方法是更好?
改为使用@font-face
。
上传您的.ttf文件并将它们转换为字体所需的.woff,.woof2等。
这里是链接标准@font-face
例如: @font-face
使用在线转换器在这里:webfont converter
你应该使用字型这样的:
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
那么你可以使用的字体无论你想要什么
字体加载时间取决于字体文件的大小。你可以使用font-squirrel提供的字体工具包:https://www.fontsquirrel.com/fonts/dejavu-sans
为了提高加载时间,你可以明智地选择所需的字体格式来绑定你的网站字体。
要获得更多关于加载时间的信息,你可以参考下面的链接,这将有很大的帮助。 https://www.smashingmagazine.com/2011/03/the-font-face-rule-revisited-and-useful-tricks/
您目前使用的方式,只是从本地机器加载字体 - 任何没有安装在他们系统上的字体的人都会看到一个备用字体。 – Connum
另外请注意,你必须坚持字体许可证(我不知道DejaVu Sans发行的是什么许可证) - 你不能仅仅转换和/或使用任何你喜欢的字体作为webfont,或者你可能不得不面对法律后果。 – Connum
@Connum,我将字体上传到我的网站文件中,我忘了添加:'@ font-face {font-family:'DejaVu Sans'; \t src:url(../ fonts/DejaVuSans.eot); src:url(../ fonts/DejaVuSans.ttf)格式(“truetype”), url(../ fonts/DejaVuSans.woff)格式(“woff”); }' – Jim