CSS3文本与字体

一、CSS3 换行

 

1、word-break(规定自动换行的处理方法)

word-break: normal / break-all / keep-all;/*
normal:使用浏览器默认的换行规则
break-all:允许在单词内换行
keep-all:只能在半角空格或连字符处换行
*/

兼容性:IE5.5+、FireFox15+、Chrome4+、Safari3.1+、Opera15+

 

2、word-wrap(允许长单词或 URL 地址换行到下一行)

word-wrap: normal / break-word;/*
normal:只在允许的断字点换行(浏览器保持默认处理)
break-word:在长单词或 URL 地址内部进行换行
*/

兼容性:IE5.5+、FireFox3.5+、Chrome23+、Safari6.1+、Opera12.1+

 

二、CSS3 新文本属性

 

1、text-align-last(规定如何对齐文本的最后一行)

text-align-last: auto / left / right / center / justify / start / end / initial / inherit;/*
auto:无特殊对齐方式
justify:内容两端对齐
start:内容对齐开始边界
end:内容对齐结束边界
*/

兼容性:text-align-last 属性只有IE支持,在Firefox中需要加上其前缀“-moz”, Chrom50.0.2661.102以上

注意(text-align-last 只有在 text-align 属性设置为 "justify" 时才起作用)

 

2、overflow(溢出文本的显示 / 隐藏)

overflowt: visible / hidden;
 

3、text-overflow(规定当文本溢出包含元素时发生的事情)

text-overflow: clip / ellipsis / string;/*
clip:修剪文本
ellipsis:显示省略符号“…”来代表被修剪的文本
string:使用给定的字符串来代表被修剪的文本
*/

兼容性:IE6.0+、FireFox7.0+、Chrome4.0+、Safari3.1+、Opera11.1+(9.0 -o-)

 

4、text-shadow(文本阴影)

text-shadow: h-shadow v-shadow blur color;

兼容性:IE10+、FireFox3.5+、Chrome4+、Safari4+、Opera9.5+

 

三、CSS3 字体

 

1、CSS3 @font-face的语法规则

font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;[font-weight: <weight>];[font-style: <style>];}/*
YourWebFontName:自定义的字体名称,将被引用到Web元素中的font-family
source:自定义的字体的存放路径,可以是相对路径也可以是绝路径
format:自定义字体的格式,主要用来帮助浏览器识别
weight:定义字体是否为粗体
style:定义字体样式,如斜体
*/

兼容性:IE9+、FireFox3.5+、Chrome4+、Safari3.2+、Opera10+

 

2、CSS3 @font-face的字体格式

 

TureTpe (.ttf)(Windows和Mac的最常见的字体,是一种RAW格式,因此不为网站优化)

兼容性:IE9+、FireFox3.5+、Chrome4+、Safari3+、Opera10+、IOS Mobile Safari4.2+

OpenType (.otf)(被认为是一种原始的字体格式,内置在TureType的基础上,所以也提供了更多的功能)

兼容性:FireFox3.5+、Chrome4+、Safari3.1+、Opera10+、IOS Mobile Safari4.2+

Web Open Font Format (.woff)(Web字体中最佳格式,是开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离)

兼容性:IE9+、FireFox3.5+、Chrome6+、Safari3.6+、Opera11.1+

Embedded Open Type (.eot)(IE专用字体,可以从TrueType创建此格式字体)

兼容性:IE4+

SVG (.svg)(基于SVG字体渲染的一种格式)

兼容性:Chrome4+、Safari3.1+、Opera10+、IOS Mobile Safari3.2+

 

3、CSS3 @font-face字体的应用

通用模版

@font-face {
font-family: 'YourWebFontName';
src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('YourWebFontName.woff') format('woff'), /* 所有主流浏览器 */url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
}

字体文件+CSS模板一键生成网站:https://www.fontsquirrel.com/tools/webfont-generator



转载于:https://www.cnblogs.com/Leophen/p/11126337.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/248603.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

系统带你学习 WebAPIs 第四讲

Web APIs 本篇学习目标&#xff1a; 能够说出常用的3-5个键盘事件 能够知道如何获取当前键盘按下的是哪个键 能够知道浏览器的顶级对象window 能够使用window.onload事件 能够使用window.onresize事件 能够说出两种定时器的区别 能够使用location对象的href属性完成页面之间的跳…

linux chrome 安装过程记录

最近&#xff0c;由于公司需要做爬虫抓取一些新闻&#xff0c;在开发过程中&#xff0c;发现有些网站有一定的反爬措施&#xff0c;通过浏览器访问一切正常&#xff0c;通过其他方式&#xff0c;包括&#xff1a;curl&#xff0c;urlconnection 等&#xff0c;就算加入了cookie…

系统带你学习 WebAPIs 第五讲

Web APIs 本篇学习目标: 能够说出常见 offset 系列属性的作用 能够说出常见 client 系列属性的作用 能够说出常见 scroll 系列属性的作用 能够封装简单动画函数 **1.1. **元素偏移量 offset 系列 1.1.1 offset 概述 offset 翻译过来就是偏移量&#xff0c; 我们使用 offset系…

ajax请求相关问题

Ajax中async:false/true的作用&#xff1a; async. 默认是 true&#xff0c;即为异步方式&#xff0c;$.ajax执行后&#xff0c;会继续执行ajax后面的脚本&#xff0c;直到服务器端返回数据后&#xff0c;触发$.ajax里的success方法&#xff0c;这时候执行的是两个线程。 async…

有赞美业微前端的落地总结

2020年4月&#xff0c;有赞美业的前端团队历经7个月时间&#xff0c;完成了美业PC架构从单体SPA到微前端架构的设计、迁移工作。PPT在去年6月份就有了&#xff0c;现在再整理一下形成文章分享给大家。 头图 目录 Part 01 “大话”微前端 微前端是什么 背景 目标 达成价值 …

bcp文件, 逗号文件

bcp 实用工具 https://docs.microsoft.com/zh-cn/sql/tools/bcp-utility?viewsql-server-2017 大容量复制程序实用工具 (bcp) 可以在 Microsoft SQL Server 实例和用户指定格式的数据文件间大容量复制数据。 使用 bcp 实用工具可以将大量新行导入 SQL Server 表&#xff0c;或…

远程登录和复制文件

命令&#xff1a; ssh 对应英文&#xff1a; secure shell 使用&#xff1a; ssh [-P] 用户名ip 优点&#xff1a; 加密和压缩&#xff0c;即安全和提高传输速度 注意&#xff1a; 除了windows系统外的系统默认有ssh客户端&#xff0c;直接使用命令便可&#xff1b; windows系统…

Markdown 编辑器才是yyds|CSDN编辑器测评

前言 今天小编为大家介绍一款编辑器&#xff0c;也正是小编书写这篇文章所使用的Markdown编辑器&#xff0c;正是广大博友想要发布文章的工具。那么 你知道他的都有哪些方便之处么 下面小编带你了解一下 Markdown是什么 Markdown是一种轻量标记语言,通过简单的语法&#xff…

JVM对象已死

(一) 引用计数法 每有一个引用就加1&#xff0c;每失效一个就减1&#xff0c;为0表示可回收&#xff1b;但是此方法无法解决相互引用的情况 (二) 根搜索算法 从一系列的GCRoots对象为起点向下搜索&#xff0c;搜索的路径称为引用链&#xff0c;当一个对象没有任何引…

pcl和opencv多版本共存

pcl和opencv多版本共存 在Ubuntu 16.04系统下安装kinetic版本ROS&#xff0c; 会默认安装opencv 3.3.1和pcl1.7. opencv安装路径/opt/ros/kinetic/ pcl安装路径/usr/ 如果想安装opencv2.4版本&#xff0c;或者安装pcl 1.8版本&#xff0c;那么如何设置安装路径&#xff0c;同时…

45天带你玩转Node(第三天)Node环境安装

本篇目标 能够搭建 Node 运行环境掌握 NodeJS 程序的运行方法理解模块化开发理解系统模块和第三方模块理解package.json文件作用 1.Node 开发概述 1.1为什么要学习服务器端开发技术 前端人员为什么要学习服务器端开发技术&#xff1f; 能够和后端程序员更加紧密的配合网站…

给页面加速,干掉Dom Level 0 Event

现在的web应用越来越复杂,需要响应各种各样的用户触发事件,因而也就不可避免的,需要给我们的html页面上的dom元素增加事件监听函数. 我们知道给dom元素绑定事件监听函数的方法有如下3种: 1 : 页面html: <button onclick”test();”></button>2: 页面html: <bu…

系统带你学习 WebAPIs —— 动画篇(第六讲)

Web APIs 本篇学习目标: 能够封装简单动画函数 能够理解缓动动画的封装 能够使用动画函数 能够写出网页轮播图案例 能够写出移动端触屏事件 1.1. 动画函数封装 1.1.1 缓动效果原理 缓动动画就是让元素运动速度有所变化&#xff0c;最常见的是让速度慢慢停下来 思路&#xff…

Git使用教程:最详细、最傻瓜、最浅显、真正手把手教!(转载学习)

一&#xff1a;Git是什么&#xff1f; Git是目前世界上最先进的分布式版本控制系统。 二&#xff1a;SVN与Git的最主要的区别&#xff1f; SVN是集中式版本控制系统&#xff0c;版本库是集中放在中央服务器的&#xff0c;而干活的时候&#xff0c;用的都是自己的电脑&#xff0…

有些话别不当回事

1、别跟堕落的人比堕落。堕落起来非常容易&#xff0c;可是堕落后再想回到不堕落&#xff0c;难。不要给自己颓废的机会。 2、不要以为躲在学校里就可以忽略外面世界的残酷现实。竞争越来越激烈&#xff1a;人越来越多&#xff0c;职位却越来越少。学校里固然温柔&#xff0c;但…

看完这篇文章保你面试稳操胜券——Vue篇

✨ 进大厂收藏这一系列就够了,全方位搜集总结,为大家归纳出这篇面试宝典,面试途中祝你一臂之力!,共分为四个系列 ✨ 本 篇 为 《 看 完 这 篇 文 章 保 你 面 试 稳 操 胜 券 》 第 一 篇 ( V

梯度下降更新算法

梯度更新是要同时更新&#xff0c;如下图所示&#xff1a;θ0和θ1同时更新&#xff0c;而不是更新完一个后再更新另一个。 学习率α过小&#xff0c;梯度下降较慢&#xff0c;训练时间增长。若学习率α过大&#xff0c;梯度下降会越过最低点&#xff0c;难以得到最优的结果&am…

MangoFix:iOS热修复另辟蹊径

今天向大家介绍的是iOS热修复的另一解决方案&#xff1a;MangoFix。介绍他的原因是他和传统的iOS热修复使用JavaScript bridge 的方式完全不同&#xff0c;MangoFix是一个语法和OC语法非常类似的DSL&#xff0c;其语言本身的设计目标就是为了解决iOS热修复问题&#xff0c;所以…

看完这篇文章保你面试稳操胜券——基础篇(html/css)

✨ 进大厂收藏这一系列就够了,全方位搜集总结,为大家归纳出这篇面试宝典,面试途中祝你一臂之力!,共分为四个系列 ✨ 本 篇 为 《 看 完 这 篇 文 章 保 你 面 试 稳 操 胜 券 》 第 二 篇 ( h

《深入理解Spark-核心思想与源码分析》(四)第四章存储体系

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。——《易经》 本章导读 Spark的初始化阶段、任务提交阶段、执行阶段&#xff0c;始终离不开存储体系。 Spark为了避免Hadoop读写磁盘的I/O操作成为性能瓶颈&#xff0c;优先将配置信息、计算结…