CSS3中新增的对文字和字体样式的设定

日期:2020-12-12 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

文本黑影

text-shadow: 水平偏位 竖直偏位 模糊不清 色调

适配性:IE10+

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF⑻">
<title>Document</title>
<style>
    p{
        color:blue;
        text-shadow: 3px 3px 3px black;
    }

</style>
</head>
<body>
    <p>这是1段检测文字鸭</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⑻">
<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> 我理想有1天,这个我国会站起起来,真实完成其信条的最高境界:“大家觉得人人生而公平的真知显而易见。”我理想有1天,在佐治亚的红山上,从前奴仆的后嗣将可以和奴仆主的后嗣坐在1起,共叙弟兄情义。</p>
    <p><span>[word-break:break-all]</span> 我理想有1天,这个我国会站起起来,真实完成其信条的最高境界:“大家觉得人人生而公平的真知显而易见。”我理想有1天,在佐治亚的红山上,从前奴仆的后嗣将可以和奴仆主的后嗣坐在1起,共叙弟兄情义。.</p>
    <p><span>[word-break:keep-all]</span> 我理想有1天,这个我国会站起起来,真实完成其信条的最高境界:“大家觉得人人生而公平的真知显而易见。”我理想有1天,在佐治亚的红山上,从前奴仆的后嗣将可以和奴仆主的后嗣坐在1起,共叙弟兄情义。</p>
</body>
</html>

word-wrap 对于持续的英文长单词或url网站地址(汉语失效)

word-wrap:normal | break-word;

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF⑻">
<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 文字最终1行怎样对齐

仅有IE适用,火狐必须加-moz-前缀,谷歌50+适用

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF⑻">
<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称为超文字标识語言,是1种标志性的語言。它包含1系列标识.根据这些标识能够将互联网上的文本文档文件格式统1,使分散化的Internet資源联接为1个逻辑性总体。HTML文字是由HTML指令构成的叙述性文字,HTML指令能够表明文本,图型、动漫、响声、报表、连接等。</p>
    <p><span>left</span>HTML称为超文字标识語言,是1种标志性的語言。它包含1系列标识.根据这些标识能够将互联网上的文本文档文件格式统1,使分散化的Internet資源联接为1个逻辑性总体。HTML文字是由HTML指令构成的叙述性文字,HTML指令能够表明文本,图型、动漫、响声、报表、连接等。</p>
    <p><span>right</span>HTML称为超文字标识語言,是1种标志性的語言。它包含1系列标识.根据这些标识能够将互联网上的文本文档文件格式统1,使分散化的Internet資源联接为1个逻辑性总体。HTML文字是由HTML指令构成的叙述性文字,HTML指令能够表明文本,图型、动漫、响声、报表、连接等。</p>
    <p><span>center</span>HTML称为超文字标识語言,是1种标志性的語言。它包含1系列标识.根据这些标识能够将互联网上的文本文档文件格式统1,使分散化的Internet資源联接为1个逻辑性总体。HTML文字是由HTML指令构成的叙述性文字,HTML指令能够表明文本,图型、动漫、响声、报表、连接等。</p>
    <p><span>justify</span>HTML称为超文字标识語言,是1种标志性的語言。它包含1系列标识.根据这些标识能够将互联网上的文本文档文件格式统1,使分散化的Internet資源联接为1个逻辑性总体。HTML文字是由HTML指令构成的叙述性文字,HTML指令能够表明文本,图型、动漫、响声、报表、连接等。</p>
    <p><span>start</span>HTML称为超文字标识語言,是1种标志性的語言。它包含1系列标识.根据这些标识能够将互联网上的文本文档文件格式统1,使分散化的Internet資源联接为1个逻辑性总体。HTML文字是由HTML指令构成的叙述性文字,HTML指令能够表明文本,图型、动漫、响声、报表、连接等。</p>
    <p><span>end</span>HTML称为超文字标识語言,是1种标志性的語言。它包含1系列标识.根据这些标识能够将互联网上的文本文档文件格式统1,使分散化的Internet資源联接为1个逻辑性总体。HTML文字是由HTML指令构成的叙述性文字,HTML指令能够表明文本,图型、动漫、响声、报表、连接等。</p>
    <p><span>initial</span>HTML称为超文字标识語言,是1种标志性的語言。它包含1系列标识.根据这些标识能够将互联网上的文本文档文件格式统1,使分散化的Internet資源联接为1个逻辑性总体。HTML文字是由HTML指令构成的叙述性文字,HTML指令能够表明文本,图型、动漫、响声、报表、连接等。</p>
    <p><span>inherit</span>HTML称为超文字标识語言,是1种标志性的語言。它包含1系列标识.根据这些标识能够将互联网上的文本文档文件格式统1,使分散化的Internet資源联接为1个逻辑性总体。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⑻">
<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称为超文字标识語言,是1种标志性的語言。它包含1系列标识.根据这些标识能够将互联网上的文本文档文件格式统1,使分散化的Internet資源联接为1个逻辑性总体。HTML文字是由HTML指令构成的叙述性文字,HTML指令能够表明文本,图型、动漫、响声、报表、连接等。</div>
    <div><span>ellipsis</span>HTML称为超文字标识語言,是1种标志性的語言。它包含1系列标识.根据这些标识能够将互联网上的文本文档文件格式统1,使分散化的Internet資源联接为1个逻辑性总体。HTML文字是由HTML指令构成的叙述性文字,HTML指令能够表明文本,图型、动漫、响声、报表、连接等。</div>
    <div><span>string</span>HTML称为超文字标识語言,是1种标志性的語言。它包含1系列标识.根据这些标识能够将互联网上的文本文档文件格式统1,使分散化的Internet資源联接为1个逻辑性总体。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⑻">
<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⑻">
<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⑻">
<title>Document</title>
<style>
    @font-face{
        font-family:"myFont";
        src:url('font/myFont.eot'),/*适配IE9+*/
            url('font/myFont.eot?#iefix') format('embedded-opentype'),/*适配IE6⑻*/
            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⑻">
<title>Document</title>
<style>
    @font-face {
        font-family: '杨任东竹石体';
        src:url('myfont/杨任东竹石体.eot'),/*适配IE9+*/
            url('myfont/杨任东竹石体.eot?#iefix') format('embedded-opentype'),/*适配IE6⑻*/
            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中新增的对文字和字体样式的设定,期待对大伙儿有一定的协助!