CSS3字体和字体图标

字体和字体图标

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,colorx:水平阴影的位置，允许负值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.json3、继续添加想要的字体图标4、重新生成，然后重新下载5、替换原来的文件夹

第2步

CSS3字体和字体图标相关推荐

php发光字体代码,CSS3怎么实现字体发光效果
这次给大家带来CSS3怎么实现字体发光效果,CSS3实现字体发光效果的注意事项有哪些,下面就是实战案例,一起来看一下. 博客页面左上角的"猿来是勇者"文字已制作发光效果,分享方法如 ...
CSS SANS – 神奇！使用 CSS3 创建的字体
在我们的认识中,CSS 所能做的就是改变网页的排版布局,调整字间距等.然而,这里我们要介绍的则是使用 CSS3 制作字体.CSS SANS 可以通过 CSS 技术创建的A-Z字体,一起来围观下. 在线 ...
delphi7 中文注释字体_使用nerd-font/font-patcher为字体添加字体图标
Nerd-fonts常用来在终端下显示各种图标,这个项目的github repo下提供了许多Nerd Font字体,图标使用效果如图. 由于目前Windows Terminal还不支持设置第二字体,要 ...
计算机字体原理,字体图标生成原理（1）
浏览器根据font-family解析渲染为不同图形的过程: 1:读取文字内容转换成对应的 unicode码() 计算机操作系统里面每个字符都有一个unicode编码,比如我们在web上输入\u621 ...
html标题字体重叠,如何在HTML和CSS的段落标题上方显示堆叠的字体超棒图标？
在下图中,有文字显示为"堆叠的字体 - 真棒图标".这是我想显示堆叠字体的图标的地方.具体来说,我想在方形轮廓内显示一个字体真棒图标(即字体真棒图标),并且可以根据需要调整它的大小 ...
CSS3 文字与字体相关样式
CSS3 给文字添加阴影,使用 text-shadow 属性给页面上的文字添加阴影效果,text-shadow 属性是在CSS2中定义的,在 CSS2.1 中删除了,在 CSS3 的 text 模块中 ...
CSS基础(21)_字体样式、图标字体
字体相关的样式 color 前景色,主要用来设置字体颜色 font-size 字体的大小 em 相当于当前元素的一个字体大小(font-s ...
css linux 等宽字体,CSS3 等宽字体与ch单位的详解
下面我们来看一篇关于CSS3 等宽字体与ch单位的使用方法介绍,希望这篇文章能够让各位理解到css中ch单位及字体等宽问题哦. 一.什么是等宽字体? 所谓等宽字体,一般是针对英文字体而言的.东亚字体, ...
微信小程序设置字体无效_微信小程序自定义字体及自定义图标问题说明
自定义图标及自定义字体,一直是很多小程序开发者的心病,其实本站是很多解决方案的,为了集中起来,方便直接跳过此坑,我特别做了这次针对字体及字体图标的跳坑: 相关讨论: Q:小程序开发时能否使用我们自定义 ...

CSS3字体和字体图标

字体和字体图标

1、CSS3嵌入网络字体

2、文字效果设置

2、字体图标

3、字体图标库

4、字体声明代码

5、css引入代码

6、字体图标的追加

CSS3字体和字体图标相关推荐

最新文章

热门文章