css字体向下来电,css系列之关于字体的事
Web Font
字體類型與格式
按照字體的描述方式來分：
點陣字體
矢量字體(輪廓字體)
按照字體的表現(xiàn)形式來分：
襯線字體(serif)：比如，宋體，Georgia，Times New Roman
非襯線字體(sans-serif):比如 Tahoma, Arial , 幼圓
其它字體：等寬字體(monospace),書寫體(cursive),夢幻體(fantasy)
@font-face
語法
@font-face的取值有以下幾個：
font-family：設置文本的字體名稱。之后可以在定義字體的字體棧中使用這個名稱。
font-style：設置文本樣式
font-variant：設置文本是否大小寫
font-weight：設置文本的粗細
font-stretch：設置文本是否橫向拉伸變形
font-size：設置文本字體大小
src：設置自定義字體的相對路徑或者絕對路徑。
注意：此屬性只能在@font-face規(guī)則里使用。
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
瀏覽器支持度
不同的瀏覽器會要求不同的字體文件類型:
TrueType(TTF)和OpenType(OTF)字體文件在絕大多數(shù)的瀏覽器上都能正常工作。
IE4—IE8要求使用特殊的字體文件格式：嵌入式OpenType(EOT)
唯一能夠在Safari上正常工作的字體文件格式就是SVG，SVG在chrome、Opera上也能正常工作，但在Firefox上不行。
WOFF的含義是Web開放字體格式。越來越多的瀏覽器都在添加對它的支持。
這些字體格式中的一些能夠互相轉(zhuǎn)換。
一般在font-face中都引入各個類型的字體文件以適配所有瀏覽器。
/* 聲明字體(圖標字體) */
@font-face {
font-family: 'webfont';
src: url('font/webfont.eot'); /* IE9 */
src: url('font/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font/webfont.woff') format('woff'), /* chrome、firefox */
url('font/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari、Android、IOS */
url('font/webfont.svg#webfont') format('svg'); /* ios 4.1 */
}
.myfont {
font-family: 'webfont'; /* 使用聲明的字體 */
}
選擇字體需要注意的問題
1、字體的中英文寫法：
我們在操作系統(tǒng)中常常看到宋體、微軟雅黑這樣的字體名稱，但實際上這只是字體的顯示名稱，而不是字體文件的名稱，一般字體文件都是用英文命名的，如SimSun、Microsoft Yahei。在大多數(shù)情況下直接使用顯示名稱也能正確的顯示，但是有一些用戶的特殊設置會導致中文聲明無效。
因此，保守的做法是使用字體的字體名稱(英文)或者兩者兼寫。如下示例：
font-family: STXihei, "Microsoft YaHei";
font-family: STXihei, "華文細黑", "Microsoft YaHei", "微軟雅黑";
2、聲明英文字體：
絕大部分中文字體里都包含英文字母和數(shù)字，不進行英文字體聲明是沒有問題的，但是大多數(shù)中文字體中的英文和數(shù)字的部分都不是特別漂亮，所以建議也對英文字體進行聲明。
由于英文字體中大多不包含中文，我們可以先進行英文字體的聲明，這樣不會影響到中文字體的選擇，因此優(yōu)先使用最優(yōu)秀的英文字體，中文字體聲明則緊隨其次。如下示例：
font-family: Arial, "Microsoft YaHei";
3、照顧不同的操作系統(tǒng)：
英文、數(shù)字部分：在默認的操作系統(tǒng)中，Mac和Win都會帶有Arial, Verdana, Tahoma等幾個預裝字體，從顯示效果來看，Tahoma要比Arial更加清晰一些，因此字體設置Tahoma最好放到前面，當找不到Tahoma時再使用Arial；而在Mac中，還擁有一款更加漂亮的Helvetica字體，所以為了照顧Mac用戶有更好的體驗，應該更優(yōu)先設置Helvetica字體；Android系統(tǒng)下默認的無襯線字體就可以接受，因此無需單獨設置。最后，英文、數(shù)字字體的最佳寫法如下：
font-family: Helvetica, Tahoma, Arial;
中文部分：在Win下，微軟雅黑為大部分人最常使用的中文字體，由于很多人安裝Office的緣故，Mac電腦中也會出現(xiàn)微軟雅黑字體，因此把顯示效果不錯的微軟雅黑加入到字體列表是個不錯的選擇；同樣，為了保證Mac中更為優(yōu)雅字體蘋方(PingFang SC)、黑體-簡(Heiti SC)、冬青黑體( Hiragino Sans GB )的優(yōu)先顯示，需要把這些字體放到中文字體列表的最前面；同時為了照顧到Linux操作系統(tǒng)的體驗，還需要添加文泉驛微米黑字體。最后，中文字體部分最佳寫法如下：
font-family: "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei";
中英文整合寫法：
font-family: Helvetica, Tahoma, Arial, "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei";
font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei";
4、注意向下兼容
如果還需要考慮舊版本操作系統(tǒng)用戶的話，不得不加上一些舊版操作系統(tǒng)存在的字體：Mac中的華文黑體、冬青黑體，Win中的黑體等。同樣按照顯示效果排列在列表后面，寫法如下：
font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", STXihei, "Microsoft YaHei", SimHei, "WenQuanYi Micro Hei";
加入了 STXihei(華文細黑)和 SimHei(黑體)。
5、補充字體族名稱
字體族大體上分為兩類：sans-serif(無襯線體)和serif(襯線體)，當所有的字體都找不到時，我們可以使用字體族名稱作為操作系統(tǒng)最后選擇字體的方向。一般非襯線字體在顯示器中的顯示效果會比較好，因此我們需要在最后添加 sans-serif，寫法如下：。
font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
6、lang及charset
影響默認字體。
lang 屬性規(guī)定元素內(nèi)容的語言。
charset 屬性可以通過任意元素上的 lang 屬性來重寫。
參考鏈接
總結(jié)
以上是生活随笔為你收集整理的css字体向下来电,css系列之关于字体的事的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vue2.x使用jsoneditor编辑
- 下一篇： 通过mvn dependency:tre