|
導讀網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立... 網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 在瀏覽器顯示中,頁面上不同的字體樣式,不僅提升了頁面的美觀度,也提升了用戶的瀏覽交互性。那么這些不同的字體樣式是怎么用css設置的?本章就給大家帶來css如何引入外部字體?css 字體樣式設置的方法(實例)。有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。一、font-family屬性的作用與用法? 1.font-family屬性的作用 font-family屬性就是可以用css代碼設置頁面上文字顯示的字體樣式,例如:宋體,微軟雅黑等等。font-family屬性設置不同的字體,可以讓頁面顯示效果更協調美觀。 font-family 屬性可以定義多個值(字體),用逗號隔開。如果瀏覽器不支持第一個字體,則會嘗試下一個,直到有一個可識別的。瀏覽器會使用它可識別的第一個值。 2.font-family屬性的用法 font-family:"設置字體名稱"; 例: css代碼: .demo{ font-family:"微軟雅黑";}html代碼: <div class="demo">我是一段測試文字</div> 這樣在demo盒子里的所有文字都會以微軟雅黑的字體樣式顯示。 二、CSS怎么引入外部字體? 一般瀏覽器常用的字體包括:宋體、黑體、微軟雅黑等幾種。因為網頁載入選擇字體時候是調用訪問者系統文字庫的文字字體,如果沒有找到字體那將顯示默認的網頁字體。而每個人安裝的操作系統默認有這幾種字體,所以這些字體又稱為安全字體。但為了一些特殊的需要,顯示有個性化的、好看的文字樣式,我們可以引用一些外部字體。 CSS引入外部字體的方法(@font-face ): 1.@font-face 標簽 介紹 @font-face 允許您在網頁中使用電腦中沒有安裝的字體,完全擺脫安全字體的限制。只需將字體包安裝在服務器上,當用戶加載網頁時,字體包會自動下載到用戶機器上,保證字體能夠正確渲染。 2.CSS引入外部字體的步驟 1)在CSS中引入字體并給外部字體自定義一個名稱 @font-face {
/* font-properties */
font-family: 用戶自定義的字體名稱;
src:url('加載外部字體文件的文件地址'),
url('加載外部字體文件的文件地址'),
url('加載外部字體文件的文件地址'); /* IE9 */
}font-family定義字體的名字,接下來的src是加載字體文件的位置,之所有有多個url就是因為瀏覽器兼容問題。 2)使用剛剛定義的字體 div {
font-family: 用戶自定義的字體名稱;
}代碼實例: @font-face {
font-family: 'YaHei Consolas Hybrid';
src: url('../fonts/yaheiconsolashybrid.ttf');
}
body {
font-family: 'YaHei Consolas Hybrid';
font-size: 16px;
}考慮到不同瀏覽器字體的格式有差別(兼容瀏覽器) /*字體后綴和瀏覽器有關,如下所示
* .TTF或.OTF,適用于Firefox 3.5、Safari、Opera
* .EOT,適用于Internet Explorer 4.0+
* .SVG,適用于Chrome、IPhone
*/
@font-face {
font-family: 'HansHandItalic';
src: url('fonts/hanshand-webfont.eot');
src: url('fonts/hanshand-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/hanshand-webfont.woff') format('woff'),
url('fonts/hanshand-webfont.ttf') format('truetype'),
url('fonts/hanshand-webfont.svg#webfont34M5alKg') format('svg');
font-weight: normal;
font-style: normal;
}3.CSS引入外部字體的好處: 隨著@font-face 的不斷流行,產生了許多新的字體格式圖標集,稱為網絡字體。這些網絡字體較平常的安全字體有以下的優點: 1)使用的是真正的文本,而不是圖片,放大和縮小都不會影響渲染效果,用戶體驗好; 2)可以被搜索引擎辨認; 3)不像圖片每次需要重新生成,添加刪除更方便。 以上就是css怎么引入外部字體?css 字體樣式設置的方法(實例)的詳細內容,更多請關注php中文網其它相關文章! 網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!