Correcting teacher:PHPz
Correction status:qualified
Teacher's comments:完成的不错,继续加油
方式 | 说明 |
---|---|
unicode | unicode 是字体在网页端最原始的应用方式,兼容性最好,支持 ie6+,及所有现代浏览器。 |
font-class | font-class 是 unicode 使用方式的一种变种,主要是解决 unicode 书写不直观,语意不明确的问题。兼容性良好,支持 ie8+,及所有现代浏览器。 |
symbol | 一种全新的使用方式,支持多色图标,不再受单色限制。兼容性较差,支持 ie9+,及现代浏览器。 |
以阿里矢量图标库: https://www.iconfont.cn 为例。
第一步:拷贝项目下面生成的 font-face 加入 css 中
/* CDN 服务仅供平台体验和调试使用,平台不承诺服务的稳定性,企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
/* 字体名称 */
font-family: "iconfont"; /* Project id 2453158 */
/* 字体文件路径(远程/本地) */
src: url("//at.alicdn.com/t/c/font_2453158_2hxgp1xcpsq.woff2?t=1666764278475")
format("woff2"), url("//at.alicdn.com/t/c/font_2453158_2hxgp1xcpsq.woff?t=1666764278475")
format("woff"),
url("//at.alicdn.com/t/c/font_2453158_2hxgp1xcpsq.ttf?t=1666764278475")
format("truetype");
}
第二步:定义使用 iconfont 的样式
.iconfont.news {
/* 1. 必须先声明自定义的字体名称 */
font-family: iconfont;
/* 2. 可选 , 声明其它字体属性 */
/* font-size: x-large;
color: green;
text-shadow: 1px 1px 1px #888; */
}
第三步:挑选相应图标并获取字体编码,应用于页面
<span class="iconfont news"></span>
第一步:拷贝项目下面生成的 fontclass 代码并加入到页面中
<link rel="stylesheet" href="//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css" />
第二步:挑选相应图标并获取类名,应用于页面
<span class="iconfont icon-zixun"></span>
第一步:拷贝项目下面生成的 symbol 代码并加入到页面中
<script src="//at.alicdn.com/t/c/font_2453158_2hxgp1xcpsq.js"></script>
第二步:加入通用 css 代码(引入一次就行)
<style type="text/css">
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
第三步:挑选相应图标并获取类名,应用于页面
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-zixun"></use>
</svg>
媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定 CSS 样式,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。
@media 媒体类型 and (媒体特性){你的样式}
max-width
:最大宽度min-width
:最小宽度
移动端:从小往大
PC 端:相反,从大往小
/* 宽度范围300及以内,宽度最大300时的样式 */
@media (max-width: 300px) {
html {
font-size: 14px;
}
}
/* 宽度范围301-500,多个媒体特性用and结合 */
@media (min-width: 301px) and (max-width: 500px) {
html {
font-size: 16px;
}
}
/* 宽度范围501及以上 */
@media (min-width: 501px) {
html {
font-size: 18px;
}
}