border图形
边框的形状
border主要是用来给盒子增加边框的, 但是在开发中我们也可以利用边框的特性来实现一些形状:
假如我们将border宽度设置成50会是什么效果呢?
如果我们进一步, 将另外三边的颜色去除呢（只设置一边的颜色）?
Web网络字体
认识Web字体
在之前我们有设置过页面使用的字体: font-family
我们需要提供一个或多个字体种类名称，浏览器会在列表中搜寻，直到找到它所运行的系统上可用的字体。
这样的方式完全没有问题，但是对于传统的web开发人员来说，字体选择是有限的;
这就是所谓的 Web-safe 字体;
并且这种默认可选的字体并不能进行一些定制化的需求;
比如下面的字体样式, 系统的字体肯定是不能实现的
那么我们是否依然可以在网页中使用这些字体呢?
使用Web Fonts即可.
Web fonts的工作原理
◼ 首先, 我们需要通过一些渠道获取到希望使用的字体(不是开发来做的事情):
对于某些收费的字体, 我们需要获取到对应的授权;
对于某些公司定制的字体, 需要设计人员来设计;
对于某些免费的字体, 我们需要获取到对应的字体文件;
◼ 其次, 在我们的CSS代码当中使用该字体(重要):
具体的过程看后面的操作流程;
◼ 最后, 在部署静态资源时, 将HTML/CSS/JavaScript/Font一起部署在静态服务器中;
◼ 用户的角度:
浏览器一个网页时, 因为代码中有引入字体文件, 字体文件会被一起下载下来;
浏览器会根据使用的字体在下载的字体文件中查找、解析、使用对应的字体；
在浏览器中使用对应的字体显示内容；
使用Web Fonts
◼ 第一步：在字体天下网站下载一个字体
https://www.fonts.net.cn/fonts-zh-1.html
默认下载下来的是ttf文件
◼ 第二步：使用字体
◼ 使用过程如下：
1.将字体放到对应的目录（ttf文件就可以）中
2.通过@font-face来引入字体, 并且设置格式
3.使用字体
◼ 注意: @font-face 用于加载一个自定义的字体;
字体图标
◼ 思考：字体可以设计成各式各样的形状，那么能不能把字体直接设计成图标的样子呢？
当然可以，这个就叫做字体图标。
◼ 字体图标的好处：
放大不会失真
可以任意切换颜色
用到很多个图标时，文件相对图片较小
◼ 字体图标的使用：
登录阿里icons（https://www.iconfont.cn/）
下载代码，并且拷贝到项目中
◼ 将字体文件和默认的css文件导入到项目中
字体图标的使用
◼ 字体图标的使用步骤:
◼ 第一步: 通过link引入iconfont.css文件（vscode新建一个文件夹，保存css文件和对应的ttf文件）
◼ 第二步: 使用字体图标
利用已经编写好的css文件里的class, 直接使用即可（就是导入的哪一个css文件）
标签：Web,文件,cursor,字体,使用,css,图标 来源： https://www.cnblogs.com/lhTest/p/16514957.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。