字体和字体图标
1、CSS3嵌入网络字体
1、https://www.dafont.com/
2、可以通过网站下载自己喜欢的字体
3、在style里面通过@font-face定义这个字体和字体的所在位置，就可以通过font-family引入这个字体
@font-face{
font-family: myfont;
src: url(../font/suite/SuitePersonalUse.ttf);
}
div{
font-family: myfont;
}
4、font-family：定义文本的字体系列
5、文字阴影：
可以使用text-shadow属性将阴影应用于文本
6、text-shadow：x,y,blur,color
x:水平阴影的位置，允许负值
y:垂直阴影的位置，允许负值
blur：可选，模糊的距离
color：可选，阴影的颜色
2、文字效果设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字阴影效果</title>
<style>
@font-face {
font-family: myfont;
src: url(../font/start/Start.otf);
}
div {
width: 250px;
height: 100px;
float: left;
font-family: myfont;
margin: 10px;
font-size: 40px;
text-align: center;
line-height: 100px;
background-color: brown;
}
.box1 {
/*内阴影效果： 设置1px的距离，设置黑色，通过对比。制造阴影效果 背景颜色选择淡色 */
background-color: rgb(243, 243, 242);
color: #f00;
text-shadow: 1px 1px 0px #070707;
}
.box2 {
/* 3D立体效果 */
/* 进行多次阴影设置：设置不同的阴影色，达到立体的文字效果,zuihou */
background-color: #cfadad;
color: white;
text-shadow: 0 1px 0 #ccc, 0 2px 0 #575151,
0 3px 1px #5c4545, 0 4px 2px #2c2828,
1px 6px 10px #2b06e4;
}
.box3{
/*霓虹灯效果 */
/* 不设置任何x轴和y轴的值，只设置模糊半径的值，模糊值越来越大 */
background-color: #070707;
text-shadow: 0 0 5px #f18888, 0 0 30px #f18888, 0 0 50px #414efd, 0 0 90px #414efd, 0 0 150px #414efd;
}
.box4{
/* 凸版效果:只设置y轴的偏移效果，设置一点模糊距离*/
color: aliceblue;
text-shadow: 0 5px 3px #555;
}
.box5{
/* 浮雕效果 */
/* 1、背景是暗色，前景色是亮色 */
color: white;
background-color: #d53737;
text-shadow: 0 -3px 0 #374683;
}
.box6{
/* 描边效果 :制作文字描边*/
background-color: #a5a5a5;
-webkit-text-stroke: 1px #e39022;
}
.box7{
/* 设置抽空文字，两个属性搭配使用 */
font-weight: 700;
-webkit-text-stroke: 1px #e39022;
-webkit-text-fill-color:transparent;
}
.box8{
/* 图片填充文字 */
/* -webkit-background-clip:可以制作背景图片填充文本的效果 */
background: url("../img/3.jpg") no-repeat left top;
-webkit-background-clip: text;
-webkit-text-fill-color:transparent;
}
.box9{
/* 模糊效果 */
/* 将前景色设置为透明。只设置模糊度 */
color: transparent;
text-shadow: 0 0 10px rgb(27, 17, 17);
}
</style>
</head>
<body>
<div class="box1">内阴影效果</div>
<div class="box2">3D立体效果</div>
<div class="box3">霓虹灯效果</div>
<div class="box4">凸版效果</div>
<div class="box5">浮雕效果</div>
<div class="box6">描边效果</div>
<div class="box7">抽空文字</div>
<div class="box8">图片填充文字</div>
<div class="box9">模糊效果</div>
</body>
</html>
2、字体图标
1、字体图标就是一些小图标，主要用于显示网页中的一些通用的、常用的一些小图标。
2、字体图标展示的是图标，实际上属于字体。
3、字体图标的优点：
轻量级：图标字体比图像要小，字体加载后图标就会马上渲染出来。减少服务器请求
灵活性：本质是文字，可以随意的改变颜色，产生阴影，透明效果，旋转
兼容性：几乎支持所有的浏览器，请放心使用
4、字体图标不能替代精灵图，只是对图标技术的部分提升和优化
5、简单的使用字体图标，复杂的使用精灵图
6、字体图标的使用：
1、字体图标的下载
2、对字体图标的引入
7、不同的浏览器支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文 件
8、通过link在css引入，然后设置类名。在css样式中全局声明字体，
<link rel="stylesheet" href="../icomoon/style.css">
<span class="icon-codeigniter"></span>
9、通过css引入页面。注意字体文件路径的问题：在style.css里面复制@font-face的字体声明代码，然后粘贴。然后把小框框复制过去，然后在该图标添加字体(记得修改路径)
@font-face {
font-family: 'icomoon';
src: url('../icomoon/fonts/icomoon.eot?adcps6');
src: url('fonts/icomoon.eot?adcps6#iefix') format('embedded-opentype'),
url('../icomoon/fonts/icomoon.ttf?adcps6') format('truetype'),
url('../icomoon/fonts/icomoon.woff?adcps6') format('woff'),
url('../icomoon/fonts/icomoon.svg?adcps6#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
span {
font-family: 'icomoon';
}
<span></span>
3、字体图标库
1、https://www.iconfont.cn/
2、https://icomoon.io/
3、https://fontawesome.com/
4、注意：可以通过add下载更多彩色的图标，通过编辑放大缩小调整方向后下载，然后生成字体，我们就可以下载了
5、得到的压缩文件夹，会有四个文件
1、进入网站
2、点击图标
3、可以选择更多的图标
4、点击添加，可以选择更多的字体库
5、可以通过编辑改变字体图标的大小和旋转的位置
6、生成字体图标
7、生成之后，下载得到压缩文件夹，保存起来，然后使用
[
8、引入后选择小方框
4、字体声明代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('../icomoon/fonts/icomoon.eot?adcps6');
src: url('fonts/icomoon.eot?adcps6#iefix') format('embedded-opentype'),
url('../icomoon/fonts/icomoon.ttf?adcps6') format('truetype'),
url('../icomoon/fonts/icomoon.woff?adcps6') format('woff'),
url('../icomoon/fonts/icomoon.svg?adcps6#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
span {
font-family: 'icomoon';
}
</style>
</head>
<body>
<span></span>
</body>
</html>
5、css引入代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../icomoon/style.css">
<style>
</style>
</head>
<body>
<span class="icon-codeigniter"></span>
</body>
</html>
6、字体图标的追加
1、如果需要添加新的字体图标到原来的字体文件中，需要：
把压缩包里面的selection.json重新上传，选中自己想要的新的图标，重新下载压缩包，并替换原来的文件就可以
1、重新点击iconapp进入页面
2、选择import icons重新上传自己的selection.json
3、继续添加想要的字体图标
4、重新生成，然后重新下载
5、替换原来的文件夹
第2步
扫一扫
880
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
