CSS3中新增的對文本和字體的設置

時間 2020-02-04

標籤 css3 css 新增文本字體設置欄目 CSS 简体版

原文原文鏈接

文字陰影css

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

兼容性：IE10+ios

<!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-allweb

對於英文文本：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;svg

<!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>