font face如何導入自定義字體

首先,瀏覽器支持什么字體取決于用戶系統里安裝了什么字體,比如CSS中這么寫:
font-family:"微軟雅黑","黑體","宋體";
那么瀏覽器會嘗試按照從左到右的順序依次應用,假設用戶電腦上沒有安裝微軟雅黑,那么就用黑體。

接下來,開發人員有點郁悶了,這個世界有這么多字體,我怎么保證用戶電腦上有我希望的字體呢?美工給我的完美效果,到了老板電腦上一團糟,會不會被罵死?

這時,CSS勇敢的站出來了,它約定了5種通用字體:"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace",請注意,這5個不是5個字體,表示5類字體,比如說serif表示那種字體成比例,且上下有小橫線的(參考time new roman),那么只要符合這個特征的字體都可以算成是serif, 具體采用哪個字體,由瀏覽器自己根據用戶電腦上安裝了哪種字體采用一個默認的,各瀏覽器可能有所不同。幾乎所有你知道的普通字體都落入這5種字體類中,這樣CSS可以基本上保證一個網頁呈現在不同用戶的電腦上的用戶體驗是差不多的。

最后,我們的美工比較變態,非要弄了個高大上的字體,一般用戶電腦上都沒有的咋整?我們可以用font-face讓用戶的瀏覽器從服務器上下載字體

@font-face {font-family: 美輪美奐的字體;src:url('字體文件1.woff'),  url('字體文件2.ttf'),url('字體文件3.eot');
}

你問我為什么要搞好幾個url指向多個字體文件?我只能說還是為了那個坑爹的兼容性,怕有的字體文件在這個操作系統不支持啊。。。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/247469.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/247469.shtml
英文地址,請注明出處:http://en.pswp.cn/news/247469.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Python中_,__,__xx__方法區別

_xx 單下劃線開頭 Python中沒有真正的私有屬性或方法,可以在你想聲明為私有的方法和屬性前加上單下劃線,以提示該屬性和方法不應在外部調用.如果真的調用了也不會出錯,但不符合規范. 方法就是以單下劃線開頭命名定義了,這種定義不會被*導入(from module …

利用@media screen實現網頁布局的自適應

利用media screen實現網頁布局的自適應 優點:無需插件和手機主題,對移動設備友好,能夠適應各種窗口大小。只需在CSS中添加media screen屬性,根據瀏覽器寬度判斷并輸出不同的長寬值 1280分辨率以上(大于1200px) media screen and (min-width:1200px){#p…

C# webkit內核 網頁填表

比如我要操作的是下面的input 用到的方法是 調用如下: webkit.StringByEvaluatingJavaScriptFromString("document.getElementsByClassName(login_i_con_li_ipt name)[0].valueThis is a Demo."); 類似這種div在webkit中好像是無法通過常規方法模擬的 這時…

p字間距 html段落內文字設置字間距間隔

只對段落p內文字設置字間距&#xff0c;段落<p>是html段落標簽&#xff0c;以<p>開始&#xff0c;以</p>結束&#xff0c;通常文章分段使用p標簽&#xff0c;而有時小局部布局也可以使用p來布局。通過css設置其樣式實現排版目的。 這里針對p設置字間距&…

基本數據類型

上節回顧 1.循環打印數列1&#xff0c;3&#xff0c;5&#xff0c;.........&#xff0c;99 for i in range(100):if i%21:print (i) 2.turtle 庫 # penup 抬筆 # pendown 落筆 # pensize 畫筆大小 # pencolor 畫筆顏色## 畫筆運動函數 # fd 前進 # bk 后退 # goto 到達指定的坐…

修改系統默認 alert 彈框樣式

修改默認 alert 彈框&#xff0c;思路很簡單&#xff0c;定義一個 alert(e) 函數&#xff0c;加載最開頭即可。 css部分&#xff1a; <style>#msg{width:266px;position: fixed;z-index:999;top: 49%;margin-top:-80px;left:50%;margin-left:-133px;background:#fff;bo…

Code Review的重要性

這幾天一直在搞一家客戶的產品升級動作&#xff0c;數據的轉移已經完成大部分&#xff0c;因為升級主要的目標是處理性能問題&#xff0c;所以我針對性的對將要升級的版本進行了一些操作性能檢查&#xff0c;真是不做不知道&#xff0c;一做嚇一跳&#xff0c;有一個查詢選擇人…

Myeclipse快捷鍵總結大全

Myeclipse快捷鍵 Ctrl1 快速修復 CtrlD: 刪除當前行 CtrlQ 定位到最后編輯的地方 CtrlL 定位在某行 CtrlO 快速顯示 OutLine CtrlT 快速顯示當前類的繼承結構 CtrlW 關閉當前Editer CtrlK 快速定位到下一個 CtrlE 快速顯示當前Editer的下拉列表 CtrlJ 正向增量查找(按…

秋蟬鳴泣之時

奇怪的題目背景 所誤入的 是回憶的教室 所響起的 是通向絕望的計時器 所到達的 是開始的結束 你 能相信嗎? 題目背景 最近禮奈醬學會了線段樹和樹狀數組兩種數據結構 由于禮奈醬上課聽的很認真&#xff0c;所以她知道 樹狀數組常見的操作是 單點加區間求和 線段樹常見的操作是…

對淺拷貝與深拷貝的研究

淺拷貝只復制指向某個對象的指針&#xff0c;而不復制對象本身&#xff0c;新舊對象還是共享同一塊內存。 淺拷貝的實現方式 Object.assign()&#xff1a;需注意的是目標對象只有一層的時候&#xff0c;是深拷貝Array.prototype.concat()Array.prototype.slice()深拷貝就是在拷…

:nth-child(n)與:nth-of-type(n)為啥顯示不對呢

首先是二者的區別 :nth-child(n) 是選擇父元素的第n個子元素。 :nth-of-type(n) 是選擇父元素的第n個同類型的子元素 舉個例子&#xff1a; <div class"read"><h1>title</h1><p>paragraph1</p><p>paragraph2</p> <!…

css3 box-shadow陰影(內外陰影與發光)講解

基礎說明&#xff1a; 外陰影&#xff1a;box-shadow: X軸 Y軸 Rpx color; 屬性說明&#xff08;順序依次對應&#xff09;&#xff1a; 陰影的X軸(可以使用負值) 陰影的Y軸(可以使用負值) 陰影模糊值&#xff08;大小&#xff09; 陰影的顏色 內陰影&#xff1a;b…

Apress Pro Android 2

Apress Pro Android 2轉載于:https://www.cnblogs.com/gavinhughhu/archive/2010/03/21/1690792.html

Query意圖分析:記一次完整的機器學習過程(scikit learn library學習筆記)

所謂學習問題&#xff0c;是指觀察由n個樣本組成的集合&#xff0c;并根據這些數據來預測未知數據的性質。 學習任務&#xff08;一個二分類問題&#xff09;&#xff1a; 區分一個普通的互聯網檢索Query是否具有某個垂直領域的意圖。假設現在有一個O2O領域的垂直搜索引擎&…

使用 vue-cli 開發多頁應用

修改的webpack配置文件 全局配置 修改 webpack.base.conf.js 打開 ~\build\webpack.base.conf.js &#xff0c;找到entry&#xff0c;添加多入口 entry: {app: ./src/main.js,app2: ./src/main2.js,app3: ./src/main3.js, }, 運行、編譯的時候每一個入口都會對應一個Chunk …

深度學習系統相比較傳統的機器學習系統,針對常見的分類問題,精度究竟能有多大提升?...

來源&#xff1a;知乎原文鏈接&#xff1a;深度學習系統相比較傳統的機器學習系統&#xff0c;針對常見的分類問題&#xff0c;精度究竟能有多大提升&#xff1f; 問題&#xff1a; 我現在手頭有一個binary classification的問題。數據量在一百萬左右。每個sample都是一個14個f…

遠程鏈接錯誤:這可能是由于credssp加密oracle修正

此錯誤解決辦法 1.WinR 輸入regedit打開注冊表 找到對應的以下目錄HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Policies\System 此時如果System下沒有CredSSP時創建CredSSP沒有Parameters時,創建Parameters 創建方法:右建>>新建>>項 2.在Para…

SpringBoot入門最詳細教程

https://www.jianshu.com/p/af3d5800f763 網上有很多springboot的入門教程&#xff0c;自己也因為項目要使用springboot&#xff0c;所以利用業余時間自學了下springboot和springcloud&#xff0c;使用下來發現springboot還是挺簡單的&#xff0c;體現了極簡的編程風格&#xf…

通過Vue CLI3 快速創建Vue項目并部署到tomcat

1、前提 首先你要安裝好nodejs和yarn,直接在官網下載安裝包&#xff0c;一鍵安裝即可&#xff0c;不需要什么環境配置&#xff0c;我安裝的是最新版本&#xff08;node-v10.13.0、yarn-1.12.3&#xff09; 2、安裝 同時寫Vue CLI 3和Vue CLI 2 的原因是官方默認的是3&#x…

簡述區塊鏈(1)- 也許只有這一篇

一、嘮叨兩句 最近一直在考慮一個事情&#xff0c;就是怎么給不太了解技術的人講清楚區塊鏈。我先試著寫下來&#xff0c;然后在逐步打磨吧&#xff0c;目標就是讓哪些說看區塊鏈看的云里霧里的同學能對區塊鏈有一些認知。 二、定義 簡單的給區塊鏈下個定義&#xff1a;基于加密…