文本
text-overflow
text-overflow用來設(shè)置是否使用一個省略標記（...）標示對象內(nèi)文本的溢出哩牍。
text-overflow: clip | ellipsis;
- clip: 隱藏超出文本(默認值)
- ellipsis: 超出部分使用省略號
一個例子
<div>十月驛前端開發(fā)學習指南</div>
div{
width: 90px;
white-space:nowrap; /*強制文本在一行內(nèi)顯示*/
text-overflow:ellipsis;
overflow: hidden; /*溢出內(nèi)容為隱藏*/
}
還須定義強制文本在一行內(nèi)顯示（white-space:nowrap）及溢出內(nèi)容為隱藏（overflow:hidden）括儒，只有這樣才能實現(xiàn)溢出文本顯示省略號的效果
text-shadow
text-shadow: x軸(X Offset) y軸(Y Offset) 模糊半徑(Blur) 顏色(Color)
和box-shdow很像
<p data-height="266" data-theme-id="dark" data-slug-hash="WwgmXB" data-default-tab="result" data-user="lulupy" data-embed-version="2" class="codepen">See the Pen <a >WwgmXB</a> by lulu (<a >@lulupy</a>) on <a >CodePen</a>.</p>
<script async src="http://assets.codepen.io/assets/embed/ei.js"></script>
文字陰影應(yīng)用:
最簡單用法:
text-shadow:2px 2px 4px black
陰影疊加:
text-shadow:2px 2px 0px red, 2px 2px 4px green;
先渲染后面的，再渲染前面的
幾個好玩的例子:
層疊：
color:red;
font-size:100px;
font-weight:bold;
text-shadow:2px 2px 0px white, 4px 4px 0px red;
光暈：
color:white;
font-size:100px;
text-shadow:0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #ff00de,
0 0 70px #ff00de,
0 0 80px #ff00de,
0 0 100px #ff00de,
0 0 150px #ff00de;
火焰文字：
div{
text-shadow: 0 0 20px #fefcc9,
10px -10px 30px #feec85,
-20px -20px 40px #ffae34,
20px -40px 50px #ec760c,
-20px -60px 60px #cd4606,
0 -80px 70px #973716,
10px -90px 80px #451b0e;
font-family:Verdana, Geneva, sans-serif;
font-size:100px;
font-weight:bold;
color:white;
}
文字描邊
-webkit-text-stroke:寬度 顏色
只支持-webkit內(nèi)核瀏覽器
div{
-webkit-text-stroke:3px red;
}
direction
定義文字排列方式(全兼容)
- Rtl 從右向左排列
- Ltr 從右向左排列
- 注意要配合unicode-bidi 一塊使用
p{
width:300px;
border:1px solid #000;
font:14px/30px "宋體";
direction:rtl;
unicode-bidi:bidi-override;
}
web字體
我們在CSS中經(jīng)常指定字體
font-family: '微軟雅黑', '宋體', Arial;
這里用的字體是用戶計算機本地字體饱普，如果找不到聲明的字體就會使用相應(yīng)語言默認的字體
很多時候出于美觀原因我們希望使用一些不是所有客戶端都有的字體孵延，比如一些美術(shù)字體
@font-face
CSS3賦予了我們使用自定義字體的能力吕漂，我們可以把字體文件像圖片一樣放在服務(wù)器或者CDN，然后在頁面通過CSS指定下載到客戶端尘应，這樣客戶端就可以使用了
@font-face {
font-family : 字體名稱;
src : 字體文件在服務(wù)器上的相對或絕對路徑;
}
body{
font-family: 字體名稱;
}
一個例子
<p>sdfsdfsdfsdfsadfsadfasdfsadfasdfasdf</p>
@font-face{
font-family: "my font";
src: url(https://fonts.gstatic.com/s/dancingscript/v6/DK0eTGXiZjN6yA8zAEyM2Ud0sm1ffa_JvZxsF_BEwQk.woff2) format('woff2');
}
body{
font-family: "my font";
font-size: 20px;
letter-spacing: 5px; /*字符間距*/
}
字體文件格式
存儲字體的格式現(xiàn)在還沒有一個標準惶凝， 各個瀏覽器支持的字體格式并不統(tǒng)一
WOFF
WOFF是Web Open Font Format簡寫。這種字體格式專門用于網(wǎng)上犬钢，由Mozilla聯(lián)合其它幾大組織共同開發(fā)苍鲜。WOFF字體通常比其它字體加載的要快些，因為使用了OpenType (OTF)和TrueType (TTF)字體里的存儲結(jié)構(gòu)和壓縮算法玷犹。這種字體格式還可以加入元信息和授權(quán)信息混滔。
這種字體格式有君臨天下的趨勢，因為所有的現(xiàn)代瀏覽器都開始支持這種字體格式。
支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】
SVG / SVGZ
Scalable Vector Graphics (Font). SVG是一種用矢量圖格式改進的字體格式坯屿，體積上比矢量圖更小油湖，適合在手機設(shè)備上使用。只有iPhone上的Safari(4.1)之前的版本支持它领跛。目前火狐乏德、IE都不支持SVG字體格式》驼眩火狐推遲對SVG字體的支持喊括，重點放在WOFF格式上。SVGZ是壓縮版的SVG矢棚。
支持這種字體的瀏覽器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】
EOT
OpenType Font 和 TrueType Font郑什。這種格式容易被復(fù)制(非法的)，這才催生了WOFF字體格式蒲肋。
.ttf字體是Windows和Mac的最常見的字體蘑拯，是一種RAW格式，因此他不為網(wǎng)站優(yōu)化,支持這種字體的瀏覽器有
【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】
.otf字體被認為是一種原始的字體格式肉津，其內(nèi)置在TureType的基礎(chǔ)上强胰，所以也提供了更多的功能,支持這種字體的瀏覽器有
【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；
兼容更多的瀏覽器
@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'), /* Modern Browsers */
url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */
url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
}
body{
font-family: 'YourWebFontName';
}
更多的字體
- bootstrap自帶
- Google Web Fonts
- Dafont.com
