admin管理员组文章数量:1594849
首先，罗列下CSS中常用的字体属性：
body {
font-family: Arial, Helvetica, sans-serif;
font-weight:normal;
font-style:italic;
font-size:1rem;
color:#111;
}
font-family中列出的是几乎适用于所有计算机的网络安全字体，如：Arial/Helvetica/Georgia/Times New Roman等。
但是如果想要一些特别的字体，可以从外部网站中找到并下载，然后在代码中引入。
以下是一些获取字体的网站：
- fontsquirrel
- fonts
- my fonts
首先需要在网站上挑选合适的字体并下载到本地，这里我选用了一种很火的免费字体：opensans，在fontsquirrel中找到并下载。
字体文件有许多格式，如TTF/OTF/EOT/WOFF/WOFF2.0，对于网页，最好使用WOFF/WOFF2.0，因为这些字体压缩性高，利于传输和加载。
刚刚从网站上下载的字体是TTL格式，需要将其转换为WOFF格式。回到fontsquirrel，点击“Generator”，将需要转换的文件上传，等待转换结束后，下载转换好的文件到本地。
将下载好的WOFF和WOFF2格式的字体文件导入项目中，并打开附带的stylesheet.css，这里定义了注册字体文件的规则。将这个文件中的内容复制到项目css文件的顶部（放顶部是因为先注册才能使用字体）并将URL改成字体文件的相对路径。
@font-face {
font-family: "opensans";
src: url("fonts/open-sans/opensans-bold-webfont.woff2") format("woff2"),
url("fonts/open-sans/opensans-bold-webfont.woff") format("woff");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "opensans";
src: url("fonts/open-sans/opensans-regular-webfont.woff2") format("woff2"),
url("fonts/open-sans/opensans-regular-webfont.woff") format("woff");
font-weight: normal;
font-style: normal;
}
这样，就可以在CSS文件中使用这种字体了。
p {
font-family: "opensans",Arial, Helvetica, sans-serif;
}
但是使用这种外部引入的字体时，会遇到一个问题，加载网页时，需要先下载字体，如果网速很慢时，字体可能需要等一会儿才下载好，那么在这段时间，网页上显示的文字字体是备用字体。比如，按照上面的font-family的设置，当浏览器下载"opensans"时，它会先显示Arial或Helvetica。当下载完成时，会变成“opensans”，这就是：Flash of Unstyled Text，即无样式文字闪现。这可能会引起排版的变化或元素的移动。
有一些技巧可以削弱这种影响，但其实无法根除。可以在@font-face中加入font-display属性告诉浏览器如何处理此类问题：
@font-face {
......
font-display: fallback;
/* 告诉浏览器，有很短的窗口期可以下载自定义字体，如果在此期间没有完成下载，浏览器就一直使用备用字体。/*
}
再介绍一种通过连接引入外部字体的方式：字体服务，有一些网站提供字体服务，如：
- fonts.google
- fonts.adobe
- fonts
- fontdect
打开fonts.google，选出想要的字体
选择完毕后，复制链接代码，粘贴到.html的head部分title之下即可。
版权声明：本文标题：HTML&CSS字体之引入外部字体 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dianzi/1728203726a1149712.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论