html字体

CSS3自定义字体写法

醉酒当歌 提交于 2019-12-04 18:05:52
CSS3自定义字体写法 ps:最好英文 中文字体太大 影响加载速度 (中文字体网上的ttf大多数是gb2312 不过页面UTF-8格式可以用 不会乱码 <meta charset="UTF-8"> 会自动转化为utf-8) <pre> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> @font-face { font-family: myFirstFont; src: url('Sansation-Light.ttf') } .ew { font-family:myFirstFont; } </style> </head> <body> <div class="ew"> With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts </div> </body> </html> </pre> myFirstFont这个是自定义字体标识 可以自定义 注意和上面font-face对应就行了 ps:一定要在window.onload 后面显示该文字 因为一定要确保字体下载好后显示 如果无法显示 看看是不是下载失败了 谷歌inspect打开 看看font面板 有没有下载 没有说明下载失败了 console

css精灵图&字体图标

久未见 提交于 2019-12-04 14:23:36
精灵图 为什么需要精灵图 为了有效的减少服务器接收和发送请求的次数,提高页面的加载速度。出现了CSS精灵技术 精灵图(sprites)的使用 精灵技术主要针对背景图片。就是把多个小背景图片整合到一张大图片中。 这个大图片也称为sprites精灵图或者雪碧图 移动背景图片位置,使用background-position 移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同 使用精灵图的时候需要精确侧脸,每个小背景图片的大小和位置 字体图标 主要用于显示网页中通用、常用的一些小图标 精灵图缺点 图片文件比较大 图片本身放大和缩小会失真 一旦图片制作完想要更换非常复杂 字体图标可以为前端工程师提供一种方便高效的图标使用方式,展示的时图标,本质属于字体 优点 轻量级:一个图标字体要比一系列的图像要小,一旦字体加载了,图标就会马上渲染出来,减少服务器请求 灵活性:本质其实是文字,可以很随意的改变颜色,产生阴影、透明效果,旋转等 兼容性:几乎支持所有的浏览器 【注意】 字体图标不能代替精灵技术,只是对工作中图标部分技术的提升和优化 字体图标的下载 icomoon字体库 http://icomoon.io 阿里iconfont字体库 http://www.iconfontcn/ 字体图标的引入 把下载包里面的font文件夹放入页面根目录 在CSS样式中全局生命字体

前端之css

安稳与你 提交于 2019-12-04 08:47:51
什么是 CSS ?   CSS (Cascading Style Sheet)译作"层叠样式表",是用于控制或增强网页样式并允许将样式信息与网页内容分离的一种标记性语言。 使用CSS样式可以控制许多仅使用HTML无法控制的属性。当浏览器中打开一个HTML网页时,浏览器将读取该网页中的HTML标签,并根据内置的 解释规则将网页元素呈现出来。CSS决定浏览器将如何描述HTML元素的表现形式。 CSS3模块 CSS3中的模块 模块名称 功能描述 Basic box model 定义各种与盒相关的样式 Line 定义各种与直线相关的样式 Lists 定义各种与列表相关的样式 Presentation Levels 定义页面中元素的不同样式级别 Speech 定义各种与语音相关的样式。比如音量,音速,说话间歇时间等属性 Background and border 定义各种与背景和边框相关的样式 Text 定义各种与文字相关的样式 Color 定义各种与颜色相关的样式 Font 定义各种与字体相关的样式 Paged Media 定义各种页眉,页脚,页数等页面元数据的样式 Cascading and inheritance 定义怎样对属性进行赋值 Value and Units 将页面上各种各样的值与单位进行统一定义,以供其他模板使用 Image Values 定义对image元素的赋值方式

微信小程序引入字体图标

南楼画角 提交于 2019-12-04 03:35:42
小程序与平常web开发中引入字体图标的方式不一样,必须先转为base64再引入,以阿里巴巴字体图标 http://iconfont.cn 为例: 一、去官网 http://iconfont.cn 下载想要的图标 1.将想要的图标添加入库: 2.进入购物车 3.下载代码 4.下载成功后,将得到一个名为 "download.zip" 的文件,然后解压得到这么一堆文件: 二、转换 ttf 文件为 base64 推荐去 https://transfonter.org 转换 1.配置选项,将配置改为如下红色框所示,并打开 Base64 encode 选项: 2.配置完选项,下一步就可以添加ttf文件开始转换了: 3.选择刚刚从阿里巴巴 http://iconfont.cn 下载后解压出来一堆文件中的 ttf 文件: 4.转换并下载: 5.下载成功后,得到一个名为 "transfonter.org" 开头的压缩包,解压后得到三个文件,然后我们打开 "stylesheet.css" 文件: 三、在小程序中使用 1.新建一个小程序项目,成功后可以自己建一个 resource 文件夹用来放字体图标等资源,并在resource目录下新建一个 "style.wxss" 的空白文件,这个wxss就是我们的字体图标文件: 2.打开新建的 style.wxss 空白文件,将转换完成后下载下来的三个文件中

CSS 字体

痴心易碎 提交于 2019-12-04 02:37:40
CSS字体属性定义字体,加粗,大小,文字样式。 serif和sans-serif字体之间的区别 在计算机屏幕上,sans-serif字体被认为是比serif字体容易阅读 CSS字型 在CSS中,有两种类型的字体系列名称: 通用字体系列 - 拥有相似外观的字体系统组合(如 "Serif" 或 "Monospace") 特定字体系列 - 一个特定的字体系列(如 "Times" 或 "Courier") Generic family 字体系列 说明 Serif Times New Roman Georgia Serif字体中字符在行的末端拥有额外的装饰 Sans-serif Arial Verdana "Sans"是指无 - 这些字体在末端没有额外的装饰 Monospace Courier New Lucida Console 所有的等宽字符具有相同的宽度 字体系列 font-family 属性设置文本的字体系列。 font-family 属性应该设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,他将尝试下一种字体。 注意 : 如果字体系列的名称超过一个字,它必须用引号,如Font Family:"宋体"。 多个字体系列是用一个逗号分隔指明: 实例 p{font-family:"Times New Roman", Times, serif;} 尝试一下 »

字体图标总结

孤者浪人 提交于 2019-12-03 23:48:31
字体图标的原理 1.浏览器将内容解析成unicode值,然后根据font-family找到对应的字体文件,在字体文件中根据unicode编码找到对应图标然后渲染出来。 字体图标的使用过程 1.通过@font-face(兼容所有浏览器) 设置字体 font-family 和 字体下载路径 2.(1)直接将unicode 的值写在html中,然后设置它的font-family (2) 将unicode 写在伪类的content 中,然后设置它的 font-family,一般是ico 设置字体,ioc-xxx 设置contont 字体图标的优点: 1. 请求一次字体文件即减少http请求,可以随意改颜色,大小,不失真,兼容性好 缺点:颜色不如真正的图片丰富,维护成本高 来源: https://www.cnblogs.com/chillaxyw/p/11811839.html

02-body标签中相关标签

匆匆过客 提交于 2019-12-03 20:17:16
02-body标签中相关标签 今日内容: 字体标签: h1~h6、<font>、<u>、<b>、<strong><em>、<sup>、<sub> 排版标签    <div> 、<span> 、 <br>、<hr>、<center>、<pre> 超链接 <a> 图片标签 <img> 一、字体标签 字体标签包含:h1~h6、<font>、<u>、<b>、<strong><em>、<sup>、<sub> 标题标签h1~h6 标题使用 <h1> 至 <h6> 标签进行定义。 <h1> 定义最大的标题, <h6> 定义最小的标题。具有align属性,属性值可以是:left、center、right。 <h1>路飞学城</h1> <h2>路飞学城</h2> <h3>路飞学城</h3> <h4>路飞学城</h4> <h5>路飞学城</h5> <h6>路飞学城</h6> 字体标签<font>(已废弃) color="红色" 或 color="#ff00cc" 或 color="new rgb(0,0,255)" :设置字体颜色。设置方式:单词 #ff00cc rgb(0,0,255) size :设置字体大小。 取值范围只能是:1至7。取值时,如果取值大于7那就按照7来算,如果取值小于1那就按照1来算。如果想要更大的字体,那就只能通过css样式来解决 face="微软雅黑" :设置字体类型

01项目准备工作

[亡魂溺海] 提交于 2019-12-03 17:08:27
1.字体图标准备    https://www.iconfont.cn/ 下载项目中需要的SVG图标    https://icomoon.io/app/#/select 在这个网站导入下载好的SVG图标,生成字体图标      这边的fonts是通过style.css来引用的,我习惯把style.css改成icon.css,然后在项目文件中src-->assets下新建一个styles目录,将fonts文件夹和icon.css复制进去。    接着在main.js中引入: import './assets/styles/icon.css'   测试:(可通过类名对图标进行大小颜色的设置)      结果成功展示:    2.项目依赖包下载+项目配置   1、安装sass:     npm install --save-dev node-sass sass-loader          此处用的node版本为10.14.1,如果是老版本下载的sass,在node高版本下会有兼容问题,请卸载sass重新安装。     卸载:npm uninstall --save-dev node-sass sass-loader 3.准备web字体   以前 CSS3 的版本,网页设计师不得不使用用户计算机上已经安装的字体。现在使用 CSS3 ,网页设计师可以使用他/她喜欢的任何字体。  

window下的php命令行输出汉字乱码处理

走远了吗. 提交于 2019-12-03 13:23:24
1. 在 php 的代码中加入 header("content-type:text/html;charset=gbk"); 2. 设置命令行的字体 在命令行上右击 属性 字体 选择如下字体 点击 确定 我按照上面的流程基本解决问题,如果还有乱码的话,看看是不是编码不是 gbk 尝试 gb2312 以及其他的一些编码。 来源: https://www.cnblogs.com/ifme/p/11796805.html

添加自定义字体icon图标

匿名 (未验证) 提交于 2019-12-03 00:32:02
先提供一个比较好的自定义icon图标库 阿里图标库 所以接下来的使用主要就是以从上面提供的网址下载的icon图标为例(如果不会使用,请参考 使用 下载完之后是一个压缩包,解压后,只需要根据我们的需要把相应的文件放入我们的项目中即可 需要注意的是:我们一般会将我们下载的字体图标放在我们自己建fonts文件夹中,把iconfont.css放在css文件夹中,如果你这样做了,一定要记得修改iconfont中的路径,比如,你的文件是像下面这样的 打开你的iconfont.css,里面的结构是: @font-face {font-family: "iconfont"; src: url('../iconfont.eot?t=1529571163938'); /* IE9*/ src: url('../iconfont.eot?t=1529571163938#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAA/YAAsAAA') format('woff'),//因为base64编码太长,所以我删减了一点,主要是看过程哈 url('../iconfont.ttf?t=1529571163938')