CSS3中新增的对文本和字体的设置

文字阴影

text-shadow: 水平偏移垂直偏移模糊颜色

兼容性：IE10+

<!DOCTYPE html>

<html lang="en" manifest="index.manifest">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

    p{

        color:blue;

        text-shadow: 3px 3px 3px black;

    }

</style>

</head>

<body>

    <p>这是一段测试文本鸭</p>

</body>

</html>

css3 换行

word-break: normal | break-all | keep-all

对于英文文本：normal 和 keep-all 效果相同；break-all 即字母和字母见换行，不考虑单词的影响

对于中文文本：normal 和 break-all 效果相同；keep-all 即根据标点符号换行

<!DOCTYPE html>

<html lang="en" manifest="index.manifest">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

    p{width:500px;}

    span{background:#abcdef;}

    p:nth-child(1){word-break:normal;}

    p:nth-child(2){word-break:break-all;}

    p:nth-child(3){word-break:keep-all;}

    p:nth-child(5){word-break:normal;}

    p:nth-child(6){word-break:break-all;}

    p:nth-child(7){word-break:keep-all;}

</style>

</head>

<body>

    <p><span>[word-break:normal]</span> I have a dream that one day on the red hills of Georgia, the sons of former slaves and the sons of former slave owners will be able to sit down together at the table of brotherhood.</p>

    <p><span>[word-break:break-all]</span> I have a dream that one day on the red hills of Georgia, the sons of former slaves and the sons of former slave owners will be able to sit down together at the table of brotherhood.</p>

    <p><span>[word-break:keep-all]</span> I have a dream that one day on the red hills of Georgia, the sons of former slaves and the sons of former slave owners will be able to sit down together at the table of brotherhood.</p>

<hr>

    <p><span>[word-break:normal]</span> 我梦想有一天，这个国家会站立起来，真正实现其信条的真谛：“我们认为人人生而平等的真理不言而喻。”我梦想有一天，在佐治亚的红山上，从前奴隶的后嗣将能够和奴隶主的后嗣坐在一起，共叙兄弟情谊。</p>

    <p><span>[word-break:break-all]</span> 我梦想有一天，这个国家会站立起来，真正实现其信条的真谛：“我们认为人人生而平等的真理不言而喻。”我梦想有一天，在佐治亚的红山上，从前奴隶的后嗣将能够和奴隶主的后嗣坐在一起，共叙兄弟情谊。.</p>

    <p><span>[word-break:keep-all]</span> 我梦想有一天，这个国家会站立起来，真正实现其信条的真谛：“我们认为人人生而平等的真理不言而喻。”我梦想有一天，在佐治亚的红山上，从前奴隶的后嗣将能够和奴隶主的后嗣坐在一起，共叙兄弟情谊。</p>

</body>

</html>

word-wrap 针对连续的英文长单词或者url网址（中文无效）

word-wrap:normal | break-word;

<!DOCTYPE html>

<html lang="en" manifest="index.manifest">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

    p{width:200px;}

    span{background:#abcdef;}

    p:nth-child(1){word-wrap:normal;}

    p:nth-child(2){word-wrap:break-word;}

</style>

</head>

<body>

    <p><span>[word-wrap:normal]</span> <br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

    <p><span>[word-wrap:break-word]</span> <br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

</body>

</html>

text-align-last 文本最后一行如何对齐

只有IE支持，火狐需要加-moz-前缀，谷歌50+支持

<!DOCTYPE html>

<html lang="en" manifest="index.manifest">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

    p{width:800px;}

    span{background:#abcdef;}

    p:nth-child(1){text-align-last:auto;}

    p:nth-child(2){text-align-last:left;}

    p:nth-child(3){text-align-last:right;}

    p:nth-child(4){text-align-last:center;}

    p:nth-child(5){text-align-last:justify;}

    p:nth-child(6){text-align-last:start;}

    p:nth-child(7){text-align-last:right;}

    p:nth-child(8){text-align-last:initial;}

    p:nth-child(9){text-align-last:inherit;}

</style>

</head>

<body>

    <p><span>auto</span>HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。</p>

    <p><span>left</span>HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。</p>

    <p><span>right</span>HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。</p>

    <p><span>center</span>HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。</p>

    <p><span>justify</span>HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。</p>

    <p><span>start</span>HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。</p>

    <p><span>end</span>HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。</p>

    <p><span>initial</span>HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。</p>

    <p><span>inherit</span>HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。</p>

</body>

</html>

text-align-last 只在text-align:justify 时才有效

text-overflow

使用时需要设置元素为overflow:hidden;

中文无效，英文短单词无效，只对英文长单词有效

<!DOCTYPE html>

<html lang="en" manifest="index.manifest">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

    div{width:800px;overflow:hidden;}

    span{background:#abcdef;}

    div:nth-child(1){text-overflow:clip;}

    div:nth-child(2){text-overflow:ellipsis;}

    div:nth-child(3){text-overflow:">>";}

    div:nth-child(4){text-overflow:clip;}

    div:nth-child(5){text-overflow:ellipsis;}

    div:nth-child(6){text-overflow:">>";}

    div:nth-child(7){text-overflow:clip;}

    div:nth-child(8){text-overflow:ellipsis;}

    div:nth-child(9){text-overflow:">>";}

</style>

</head>

<body>

    <div><span>clip</span>HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。</div>

    <div><span>ellipsis</span>HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。</div>

    <div><span>string</span>HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。</div>

    <div><span>clip</span>I have a dream that one day on the red hills of Georgia, the sons of former slaves and the sons of former slave owners will be able to sit down together at the table of brotherhood.</div>

    <div><span>ellipsis</span>I have a dream that one day on the red hills of Georgia, the sons of former slaves and the sons of former slave owners will be able to sit down together at the table of brotherhood.</div>

    <div><span>string</span>I have a dream that one day on the red hills of Georgia, the sons of former slaves and the sons of former slave owners will be able to sit down together at the table of brotherhood.</div>

    <div><span>clip</span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

    <div><span>ellipsis</span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

    <div><span>string</span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

</body>

</html>

text-overflow:clip; 隐藏

text-overflow:ellipsis; 省略号

text-overflow:string; 指定字符，只在火狐浏览器有效

<!DOCTYPE html>

<html lang="en" manifest="index.manifest">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

    div{width:800px;overflow:hidden;}

    span{background:#abcdef;}

    div:nth-child(1){text-overflow:clip;}

    div:nth-child(2){text-overflow:ellipsis;}

    div:nth-child(3){text-overflow:">>";}

    div:nth-child(4){text-overflow:clip;}

    div:nth-child(5){text-overflow:ellipsis;}

    div:nth-child(6){text-overflow:">>";}

    div:nth-child(7){text-overflow:clip;}

    div:nth-child(8){text-overflow:ellipsis;}

    div:nth-child(9){text-overflow:">>";}

</style>

</head>

<body>

    <div><span>clip</span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

    <div><span>ellipsis</span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

    <div><span>string</span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

</body>

</html>

overflow: visible | hidden | scroll | auto | inherit

鼠标悬浮时显示隐藏的文字

<!DOCTYPE html>

<html lang="en" manifest="index.manifest">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

    div{width:800px;overflow:hidden;text-overflow:ellipsis;}

    div:hover{overflow:visible;}

</style>

</head>

<body>

    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

</body>

</html>

@font-face 兼容性 IE9+

字体格式

TrueType .ttf 无优化兼容性IE9+

OpenType .otf 是ttf的升级版，不兼容IE

.woff web版本最佳字体格式是TrueType/OpenType的压缩格式兼容性IE9+ 但是不能兼容手机端！

.eot IE专用字体格式

.svg svg字体格式 IE和火狐都不兼容

自定义字体通用模板

<!DOCTYPE html>

<html lang="en" manifest="index.manifest">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

    @font-face{

        font-family:"myFont";

        src:url('font/myFont.eot'),/*兼容IE9+*/

            url('font/myFont.eot?#iefix') format('embedded-opentype'),/*兼容IE6-8*/

            url('font/myFont.ttf') format('truetype'),/*兼容手机端*/

            url('font/myFont.woff') format('woff'),/*兼容所有浏览器*/

            url('font/myFont.svg#myFont') format('svg');/*针对ios开发*/

    }

    p{font-family: 'myFont';} 

</style> 

</head> 

<body> 

<p>这是我的自定义字体呀~</p> 

</body>

</html>

获取特殊字体的网站：https://www.fontsquirrel.com/tools/webfont-generator

由于是国外服务器，因此下载速度比较慢

注意：经我个人发现，这个软件转换出来的字体格式，都只支持英文版

建议还是使用其他国内的在线转换工具或者网址

字体文件

<!DOCTYPE html>

<html lang="en" manifest="index.manifest">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

    @font-face {

        font-family: '杨任东竹石体';

        src:url('myfont/杨任东竹石体.eot'),/*兼容IE9+*/

            url('myfont/杨任东竹石体.eot?#iefix') format('embedded-opentype'),/*兼容IE6-8*/

            url('myfont/杨任东竹石体.ttf') format('truetype'),/*兼容手机端*/

            url('myfont/杨任东竹石体.woff') format('woff'),/*兼容所有浏览器*/

            url('myfont/杨任东竹石体.svg#杨任东竹石体') format('svg');/*针对ios开发*/

    }

    p{font-family: '杨任东竹石体';font-size:24px;}

</style>

</head>

<body>

    <p>HELLO THIS IS MY FONT~这是我的自定义字体~</p>

</body>

</html>

成功~~~

CSS3中新增的对文本和字体的设置的更多相关文章

妙味css3课程---1-2、css3中新增的伪类和伪元素有哪些
妙味css3课程---1-2.css3中新增的伪类和伪元素有哪些一.总结一句话总结: 1.div:target{}是什么意思? 比如a标签的锚点链接到div,div:target{}就可以找到这个 ...
CSS3中新增的内容
(整理中······) 一.选择器新增的伪类 1.p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素. 2.p:last-of-ty ...
css3中新增的样式使用方法
在PC版开发中由于IE原因,我们很少用到css3,但随着平板和智能手机进入我们的生活,以及现在越来越流行,在手机版和平板版开发中我们就可以大胆的使用了,下面我们探讨常用几个css3属性: 1.css3 ...
html5--6-23 CSS3中的文字与字体
html5--6-23 CSS3中的文字与字体 text-overflow 设置是否使用一个省略标记(...)标示对象内文本的溢出 clip: 默认值当对象内文本溢出时不显示省略标记(...),而是将 ...
html5--6-19 CSS3中的文字与字体
html5--6-19 CSS3中的文字与字体学习要点掌握文字与字体的设置颜色值查询方法: 百度查询,很多网站有提供下载相关手册等需要时查表运用绘图工具中的拾色器 CSS中常用的字体属性设置 ...
css3新增属性有哪些？css3中常用的新增属性总结
css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 一.css ...
CSS3中的弹性流体盒模型技术详解
先回顾一下CSS1 和 CSS2中都已经定义了哪些布局方面的属性,这样也会增加我们理解弹性布局. 其实我们现在有很多一部分人,你们刚刚接触CSS层叠样式表,或者接触有一段时间了,但是却没有很好的去 ...
css3中的布局相关样式
web页面中的布局是指在页面中如何对标题.导航栏.主要内容.脚注.表单等各种构成要素进行合理编辑.在css3之前,主要使用float属性或position属性进行页面中的简单布局,但是也存在一些缺点, ...
CSS3的新增边框属性
一.CSS3 新增的边框属性属性版本简介 border-image CSS3 设置或检索对象的边框使用图像来填充 border-image-source CSS3 设置或检索对象的边框是否用图像 ...

随机推荐

谈下程序设计算法的准备心得与体会-nCov隔离也许帮你提升能力
最近武汉的n-Cov使得大家只能在家办公了. 在家里的感受是什么样的呢? 1.上班的时候一直在奔跑,现在总算可以有集中的时间来思考一些之前一直没能好好整理的内容 2.时间变得自己可以掌控,优先级有自己 ...
VC简单操作mysql
#include <iostream> #include <winsock.h> #include <mysql.h> #pragma comment(lib, & ...
content-type常见类型辨析(以ajax与springmvc前后端交互为例)
博客搬家: content-type常见类型辨析(以ajax与springmvc前后端交互为例) 在http报文的首部中,有一个字段Content-type,表示请求体(entity body)中的数 ...
程序员过关斩将--redis做消息队列，香吗？
Redis消息队列在程序员这个圈子打拼了太多年,见过太多的程序员使用redis,其中一部分喜欢把redis做缓存(cache)使用,其中最典型的当属存储用户session,除此之外,把redis作为 ...
【WPF学习】第四十四章图画
通过上一章的学习,Geometry抽象类表示形状或路径.Drawing抽象类扮演了互补的角色,它表示2D图画(Drawing)——换句话说,它包含了显示矢量图像或位图需要的所有信息. 尽管有几类画图类 ...
为什么用上了HTTPS，还是被流量劫持？
广告再临 “老周,有人找你” 一大早,361杀毒公司的老周就被吵醒. 今天的阳光很明媚,老周伸了伸懒腰,这才踱步走向工作室. “是谁一大早的就来吵吵,坏了我的瞌睡”,听得出来,老周有点不太高兴. “咚 ...
Android View的绘制机制前世今生---前世
就像上个文章说的,触摸事件的传递机制是从外层到内层的过程. 我们想来看看这个页面里面的层级关系: 以下我们就用what-how-why三部曲的方式来分析View的绘制过程. 由于篇幅很大,所以分几篇来 ...
Unity酱~ 卡通渲染技术分析（一）
前面的话 unitychan是日本unity官方团队提供的一个Demo,里面有很好的卡通渲染效果,值得参考学习上图是我整理出来的shader结构,可以看到Unity娘被拆分成了很多个小的部件,我想主 ...
VFP日期时间转中文日期时间
本函数原为VFP中取日期转中文日期方式,后增加日期时间处理,并改用Iif及ICase修改原代码.Function DateTime2CHNParameters pdDate,plTime*!* pdD ...
IP unnumbered interface，某个接口不编号，某个接口不分配IP地址
OSPFv2中,提到点到点链路可以是unnumbered,不编号,不分配IP地址 12.4.1.1. Describing point-to-point interfaces ...

CSS3中新增的对文本和字体的设置

CSS3中新增的对文本和字体的设置的更多相关文章

随机推荐

热门专题