html字体 | 易学教程

CSS - icon图标(icon font)

阅读更多关于 CSS - icon图标(icon font)

1. 概念这个小红点是图标，图标在CSS中实际上是字体。 2. 为什么出现本质是字体的图标? 2.1 图片增加了总文件的大小。 2.2 图片增加了额外的http请求，大大降低网页的性能。 2.3 图片不能很多地进行缩放，因为图片放大和缩小会失真。 3. 字体图标的优点，结合图片和文字的特性 3.1 可以做出跟图片一样可以做的事情,改变透明度、旋转度等等 3.2 本质是文字，可以很随意的改变颜色、产生阴影、透明效果等等 3.3 体积更小，可携带的信息没有削减 3.4 几乎支持所有浏览器 3.5 对移动端设备友好 4. 字体图标使用流程网站看bookmarks，美工 --> 图标 5. 字体引入到HTML 以https://icomoon.io/#home为例点击右上角的IcoMoon App 将下载来的压缩包中的fonts文件夹放进我们的项目中在html中声明字体 @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?7kkyc2'); src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?7kkyc2') format('truetype'), url(

HTML文档设置标记-文本标记

阅读更多关于 HTML文档设置标记-文本标记

1，hn 标题标记共有6个级别，n的范围1～6，不同级别对应显示大小不同的标题，h1最大，h6最小 2，font 字体设置标记　　设置字体的格式，三个常用属性：　　a，size（字体大小）<font size＝“3”>取值范围是1～7，浏览器默认是3，XHTML1.0中不支持size属性　　b，color（颜色）<font color＝“red”> 　　c，face（字体）<font face＝“微软雅黑”> 3，b 粗字体标记 4，i 斜字体标记 5，sub 文字下标字体标记 6，sup 文字下标字体标记 7，tt 打印机字体标记 8，cite 引用方式的字体，通常是斜体 9，em 表示强调，通常显示为粗字体 10，strong 表示强调，通常显示为粗字体 11，small 小型字体标记 12，big 大型字体标记 13，u 下划线字体标记 eg： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>第四天</title></head><body> test<br/> <h1>第四天</h1> <h2>第四天</h2> <h3>第四天</h3> <h4>第四天</h4> <h5>第四天</h5> <h6>第四天</h6> <font size="1" color="red" face=

前端CSS(3)

阅读更多关于前端CSS(3)

前端基础CSS(3) 一、文本属性和字体属性（常用的） 1、文本属性　　text-align:left|right|center|justify（两端对齐，只适用于英文）; /*对齐方式*/ 　　color:色值; /*文本颜色*/ 　　text-indent:2em; /*首行缩进，建议单位用em*/ 　　text-decoration:none|underline|overline|line-through|inherit; 　　line-height:高度值; 2、字体属性　　font-weight:normal|bold|border|lighter|100~900|inherit; /*100~300没区别*/ 　　font-family:字体; 　　a、网页中不是所有字体都能显示，因为这个字体要看用户的电脑里面装没装，比如你设置：font-family:”华文彩云”;如果用户电脑里面没有这个字体，那么就会变成宋体 ; 　　　　b、为了防止用户电脑里面没有你设置的那个字体，我们通常写多个用逗号隔开的备选字体，如：font-family: "Times New Roman","微软雅黑";备选字体可以有无数个，默认显示第一个，没有安装第一个就显示第二个，以此类推，都没装就显示宋体 ; 　　　　c、我们要将英语字体，放在最前面，这样所有的中文，就不能匹配英语字体

CSS的总结(选择器,伪类等...)

阅读更多关于 CSS的总结(选择器,伪类等...)

关于组合选择器可参考: http://www.cnblogs.com/starof/p/4453458.html 主要内容 CSS概述 CSS和HTML结合的四种方式 CSS样式优先级和代码规范 CSS三种常用选择器 CSS三种扩展选择器 CSS的常见操作 CSS概述 CSS （Cascading Style Sheet）是层叠样式表.作用来定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。 CSS的优点 1：CSS可以更加精细的控制网页的内容形式。比如说前面的font标签中的size属性，可以用于控制文字的大小，但是，它控制的字体只有7级。要是出现其他级别的文字，它就实现不了，而css可以办到，它可以任意设置字体的大小。 2：CSS样式是丰富多彩的。 3：CSS的样式定义是灵活多样的。 CSS和HTML结合的方式 sytle属性方式(行内样式) style标签方式(内嵌样式) 导入方式链接方式 A：style属性方式：利用标签中style属性来改变每个标签的显示样式。例： <p style="background-color:#FF0000; color:#FFFFFF"> 　　 p标签段落内容。 </p> 该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。 B：style标签方式：（内嵌方式）

在HTML种引用阿里巴巴iconfont字体图标

阅读更多关于在HTML种引用阿里巴巴iconfont字体图标

概述什么是阿里巴巴iconfont字体图标呢？ iconfont字体图标就是用字体来代替图标、图片文件的做法，并且通过字体图标可以对图标的大小、颜色等进行控制。以前要引用各种图标需要使用的是图标图片，而使用图片需要向服务器请求图片资源，如果有请求次数非常多而用户量又很大那么会很麻烦，造成很多问题，而使用iconfont字体图标，即跟HTML加载一样，减少请求次数，缓解服务器压力。在国内的阿里巴巴iconfont字体图标网站有很多免费可用的字体图标，下载代码即可使用。下载首先需要注册一个账号，在阿里巴巴矢量图标库，也可以使用微博、GitHub账号登录。登录成功后，可以在首页搜索你要寻找的字体图标名称，在这里搜索的是“首页” 搜索成功后，把鼠标放在你要使用的图标上然后将其加入到库点击购物车，查看添加的图标然后下载代码下载成功后是一个压缩包，将其解压打开其中的demo_index.html文件可以看到字体图标的使用教程。引用方式特点使用步骤 Unicode 引用兼容性最好，支持 IE6+，及所有现代浏览器。支持按字体的方式去动态调整图标大小，颜色等等。但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。第一步：拷贝项目下面生成的 @font-face；第二步：定义使用 iconfont 的样式；第三步

css-抖音字体效果

阅读更多关于 css-抖音字体效果

<!DOCTYPE html> <html> <head> <meta chartset="UTF-8"> <title>2020</title> <style> body{ background-color:gray;/*设置背景色*/ } #h1{/*ID选择器,名称唯一，不可重复*/ color:white; /* background-color: darkorange;*/ font-family: "微软雅黑,sans-serif"; font-size: 48px; font-weight: 500; width:400px; height: 100px; text-shadow: #f03740 -1px -3px,#2addfd 3px 0px;/*抖音字体效果*/ } </style> <link rel="stylesheet" herf="01.css"> </head> <body> <h1 id="h1",style="color: chocolate;">2020加油！！！</h1> </body> </html> 来源： CSDN 作者： ran2017 链接： https://blog.csdn.net/ran2017/article/details/104157903

input text 字体的影响

阅读更多关于 input text 字体的影响

字体对input的影响 <html> <head> <meta charset="UTF-8"> </head> <style type="text/css"> input{ background: #EAEEF1; border: 2px solid #EAEEF1; color: #666666; font-family: 'Open Sans', sans-serif; } </style> <body> <input type="text"/> </body> </html> 效果： <html> <head> <meta charset="UTF-8"> </head> <style type="text/css"> input{ background: #EAEEF1; border: 2px solid #EAEEF1; color: #666666; font-family: "华文行楷"; } </style> <body> <input type="text"/> </body> </html> 效果：一个看起来还行的input输入框 <html> <head> <meta charset="UTF-8"> </head> <style type="text/css"> input{ background: #EAEEF1; border: 2px solid

04001_HTML简单介绍

阅读更多关于 04001_HTML简单介绍

1、超文本标记语言　　（1）超文本：比普通文本功能更加强大；　　（2）标记语言：使用一组标签对内容进行描述的一门语言，它不是编程语言！ 2、HTML语法和规范　　（1）所有的html文件后缀名都是以.html或者.htm结尾的，建议使用.html结尾；　　（2）整个html文件分别由头部分<head></head>和体部分<body></body>组成；　　（3）Html标签都是由开始标签和结束标签组成，单标签除外（<br />）；　　（4）html不区分大小写，建议使用小写。 3、标题标签　　（1）标题标签使用<hn></hn>，n从1到6逐渐变小，超过6的按照6进行显示；　　（2）代码演示： 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>标题标签</title> 7 </head> 8 9 <body> 10  11 <h1>我是标题1</h1> 12 <h2>我是标题2</h2> 13 <h3>我是标题3</h3> 15 <h4>我是标题4</h4> 18 <h5>我是标题5</h5> 21 <h6>我是标题6</h6> 22 </body> 23 24 </html> 　　运行结果：　　 4、注释标签

css字体样式+文本样式

阅读更多关于 css字体样式+文本样式

font-family属性值：具体字体名或者字体集如果是中文或者有单词之间有空格，需要加双引号字体集： Serif （有装饰线） Sans-serif （无装饰线） Monospace Cursive Fantasy <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> h1{ font-family: "Times New Roman"; } p{ font-family: "微软雅黑","宋体","黑体",sans-serif; } </style> </head> <body> <h1>css层叠样式表</h1> <p>什么是css层叠样式表呢？</p> </body> </html> font-size 相对单位 px （受显示器分辨率影响，在手机端一般不使用） em （针对父元素） % （针对父元素）字体颜色可查询 web安全色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*rgb数字：0~255*/ h1{ color:rgb(0,255,0); } /*rgb百分比：0%~100%

Node.JS实战58：写一套反爬虫系统！

阅读更多关于 Node.JS实战58：写一套反爬虫系统！

爬虫，网络安全最大的威胁之一！根据爬取数据类型而分，爬虫有不少种类，比如爬取Email地址的、爬取商品价格的、爬取图片的，而最多的是爬取内容的，内容数据爬虫是为泛滥的！爬虫让很多人对其深感苦恼，今天的Node.JS实战，将实现一种防护性能很强的反爬虫系统。首先展示防护效果，然后付上完整代码，以了解实现方法。防护效果展示根据两个核心思路进行效果展示如下： 1、字体加密创建自定义字体库，将字体进行加密。举一个最直白的例子：比如要在网页中显示文字：“我是我，你是你，她是她”，在正常的情况下，网页中就是存在这几个字，爬虫当然可以爬取。我们要实现的效果是，让这几个字不存在，网页源码中可能是：但是在网页中可以正常显示：但是却不可复制，复制后，全部或部分内容将不能正常显示： 2、字体防破解单纯的字体加密，是不太难被破解的，因为上述的“密文乱码符号”，其实也就是一种对应关系，例如：“A”对应“啊”，“B”对应“不”。只要获得足够的对应关系，替换就可以破解还原出原内容。具体实施时，可以从网页中获取字体文件。如TTF，通过格式转换，化为TTX，即可得到对应关系。也可以手动记录对应关系。那么对于这两种破解，我们也需要进行防护。 1、防止字体文件被下载；动态字体路径：注意以下两图，不同的字体路径：即：每次访问都是不同的字体路径，而且，此动态路径文件是不可下载的：

订阅 html字体