编程 HTML / CSS

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

Posted in HTML / CSS onFebruary 03, 2020

文字阴影

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中新增的对文本和字体的设置

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>

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

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>

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

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>

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

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>

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

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>

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

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>

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

@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

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

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

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

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

字体文件

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

<!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中新增的对文本和字体的设置，希望对大家有所帮助！

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐

html5 css3 动态气泡按钮实例演示

Dec 02 HTML / CSS

CSS3 滤镜 webkit-filter详细介绍及使用方法

Dec 27 HTML / CSS

CSS3实现同时执行倾斜和旋转的动画效果

Oct 27 HTML / CSS

CSS3实现渐变背景兼容问题

May 06 HTML / CSS

CSS3 实现倒计时效果

Nov 25 HTML / CSS

纯CSS3实现圆圈动态发光特效动画的示例代码

Mar 08 HTML / CSS

使用HTML5 Canvas绘制直线或折线等线条的方法讲解

Mar 14 HTML / CSS

HTML5文档结构标签

Apr 21 HTML / CSS

canvas实现图片马赛克的示例代码

Mar 26 HTML / CSS

HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例

Aug 18 HTML / CSS

AmazeUI 折叠面板的实现代码

Aug 17 HTML / CSS

浅谈移动端中的视口(viewport)的具体使用

Apr 13 HTML / CSS

CSS3动画特效在活动页中的应用

Jan 21 #HTML / CSS

如何用border-image实现文字气泡边框的示例代码

Jan 21 #HTML / CSS

CSS3实现网站商品展示效果图

Jan 18 #HTML / CSS

2分钟教你实现环形/扇形菜单(基础版)

Jan 15 #HTML / CSS

css3一个简易的 LED 数字时钟实现方法

Jan 15 #HTML / CSS

Grid 宫格常用布局的实现

Jan 10 #HTML / CSS

CSS3 旋转立方体问题详解

Jan 09 #HTML / CSS