CSS3系列教程:嵌入字型/網路字型
想要製作一些很酷的頭部效果而且擺脫網站安全字型並且不使用圖片檔案?那麼就使用CSS3嵌入字型吧!
要使用一款字型,我們首先需要使用‘@font-face’屬性。這必須先準備好我們要用的字型檔案。
儘管這樣,讓我們簡單的學習一下字型方面的歷史。@font-face屬性從CSS2就已經考慮了,但卻始終在CSS2.1中還沒有出現。CSS3嘗試經它帶到標準中來。
如果你手上沒有字型檔案,你可以在dafont.com下載一些。
跨瀏覽器相容性
目前只有Safari支援@font-face
特性(Google Chrome開發版 2.0.156+也支援這個特性)。
所有瀏覽器都支援font-face。
CSS3嵌入字型
上面的效果可由下面的樣式實現:
@font-face {
font-family: qianduanNet;
src: url("SketchRockwell.ttf");
}
.fontFace{
font-family: qianduanNet;
font-size: 3.2em;
letter-spacing: 1px;
text-align: center;
}
我們也可以對使用font-face的地方使用陰影效果。
.fontFaceShadow{ font-family: qianduanNet; font-size: 3.2em; letter-spacing: 1px; text-align: center; text-shadow: 3px 3px 7px #111; }
CSS3系列教程|前端觀察
特別宣告,本系列文章譯自:Zen Elements,非常感謝Alex的辛勤工作。
Special Staterment: this series posts were translate from Zen Elements, thanks Alex for his great work so much.
相關推薦
CSS3系列教程:嵌入字型/網路字型
想要製作一些很酷的頭部效果而且擺脫網站安全字型並且不使用圖片檔案?那麼就使用CSS3嵌入字型吧! 要使用一款字型,我們首先需要使用‘@font-face’屬性。這必須先準備好我們要用的字型檔案。 儘管這樣,讓我們簡單的學習一下字型方面的歷史。@font-face屬性從CSS2就已經考
CSS3系列教程:HSL 和HSLA
使用CSS3 HSL宣告同樣是用來設定顏色的。下一個呢? HSLA? 是的,這個和RGBA的效果是一樣的。 HSL宣告使用色調Hue(H)、飽和度Saturation(s)和亮度Lightness(L)來設定顏色。 Hue衍生於色盤:0和360是紅色,接近120的是綠色,240是藍
CSS3系列教程:多列/多卷
使用CSS3可以為你的網站建立多列,而不用為每列制定特定的層或段落。 與多背景圖片一樣,CSS3多列也是我最喜愛的一個技術。我想這條CSS3屬性有在報紙和雜誌佈局中以外的很多潛在的用途。如果你在某個想法或個人網站中使用了這種方法,請在下面的評論中提交你的連結,我很高興能確認這種方法能用
CSS3系列教程:RGBA
使用新的CSS3的”RGBA”宣告,不僅僅讓我們像通常一樣設定RGB顏色,而且還可以設定其透明度。 RGBA像RGB一樣設定顏色,而這個”A”——RGBA中的最後一個值——允許我們設定該元素的透明度。就像opacity宣告一樣,一個opacity值為1的元素是完全不透明的,而一個opa
CSS3系列教程:邊框顏色
現在我們來看一看如何為邊框的border-color新增更多的色彩。 使用CSS3的border-radius屬性,如果你設定了border的寬度是X px,那麼你就可以在這個border上使用X種顏色,每種顏色顯示1px的寬度。如果說你的border的寬度是10個畫素,但是隻聲明瞭5
CSS3系列教程:背景圖片(背景大小和多背景圖)
背景圖片/紋理有很多種使用方式,常常用於為新增網站的最佳的介面美化。現在它在CSS3中被重視,我們可以應用多背景圖和背景圖片尺寸來實現更完美的效果。 CSS3的背景圖片大小可以寫成 background-size:Apx Bpx; Apx = x軸(圖片寬度) Bpx = y軸
CSS3系列教程:簡介
CSS3不是新事物,更不是隻是圍繞border-radius屬性實現的圓角。它正耐心的坐在那裡,已經準備好了首次登場,呷著咖啡,等著瀏覽器來鋪上紅地毯。你看,瀏覽器需要跟上了…… 注意:瀏覽器需要改進 儘管把玩CSS3是很有趣的事情——就像接下來我要演示的幾篇教程中表現的那樣,但是需
CSS3系列教程:邊框半徑和圓角
頁面中圓角的實現是個很頭疼的問題,雖然現在有很多種實現方法,但是都是比較麻煩的。在本文中,讓我們看看如何使用CSS3 border-radius來實現圓角DIV。 跨瀏覽器相容性 就像在上一篇《CSS3系列教程:簡介》中提到的,並不是所有的瀏覽器支援CSS3,但是那些比較好的瀏覽器選
CSS3系列教程:陰影
陰影大約從CSS2就開始有了,但是隻有Safari一個瀏覽器支援它,到現在依然是這樣。陰影在CSS3中可以應用在邊框和文字上,就像圖片的陰影效果一樣。 一般可以分為box-shadow和text-shadow兩類。 CSS3的box-shadow和text-shadow可以寫做:bo
CSS3系列教程:透明度
CSS3透明…不透明…漸變…隨便你怎麼叫它吧!這裡是一些使用CSS3透明度的指南以及一些例子。 其實這個firefox很久以前就支援了,而IE一直不支援! “opacity”宣告用來設定一個元素的透明度:層、文字、圖片等…一個opacity的值為1的元素是完全不透明的,反之,值為0是
自定義web字型-通過@font-face在頁面中嵌入 .woff格式字型的引用
woff檔案樣式檢視連結 http://fontstore.baidu.com/static/editor/index.html 上傳woff檔案 即可看到woff檔案的展示效果 woff檔案可以用python的fontTo
jxbrowser 監聽所有網路請求 jxbrowser 系列教程2
jxbrowser 在 jxbrowser 中有一個介面叫做 NetworkDelegate 處理url 請求和相應 Modifier and Type
CSS3中引入多種自定義字型(font-face)
今天在HTML中發現了一個問題,提供給我們預設的字型有很多,但是除了那些“黑體”、“宋體”、“楷體”等支援中文字型之外,其餘的都不知道中文字型,如果我們需要用自己喜歡的字型怎麼辦呢?CSS3中是否可以引入自定義下載的字型呢?如果可以我們應該怎麼引入?帶著這一系列
python網路爬蟲系列教程——Python+PhantomJS +Selenium組合應用
全棧工程師開發手冊 (作者:欒鵬) Selenium 是什麼?一句話,自動化測試工具。它支援各種瀏覽器,包括 Chrome,Safari,Firefox 等主流介面式瀏覽器。 理解Selenium很簡單,平時我們使用的獲取網頁,都是
深度神經網路演算法機器學習深度學系列教程
深度神經網路演算法機器學習深度學系列視訊教程 (基礎1)Python程式入門視訊課程Python介紹_壓縮環境配置配置Python環境以及資料型別字串String和變數資料型別2整型_字串資料結構列表列表List元組tuple對比元組詞典函式函式控制流控制流控制流控制流輸入輸出格式檔案輸入輸出錯誤與異
python應用系列教程——python使用scapy監聽網路資料包、按TCP/IP協議進行解析
全棧工程師開發手冊 (作者:欒鵬) python使用scapy監聽抓取網路資料包。 scapy具有模擬傳送資料包、監聽解析資料包、網際網路協議解析、資料探勘等多種用處。這裡我們只來說一下scapy監聽資料包,並按照不同的協議進行解析。
css 使用@font-face 嵌入自定義字型或字型圖示方法筆記
通常css使用font-family指定客戶端顯示字型的樣式,本筆記目的在於解決客戶端未安裝指定字型,導致無法完成設計效果要求。與此同時現在大部分圖示使用字型格式,因為它有向量,體積小等等優點講解如何使用字型圖示 下面是詳細的方法步驟: 1、製作或下載字型檔案 由於瀏覽器對
條形碼控制元件TBarCode SDK系列教程十一(網路應用程式問題解答)
TBarCode SDK是一款可以在任意應用程式和印表機下生成和列印所有條碼的條碼軟體元件。TBarCode SDK對於Microsoft Office使用者以及軟體開發者提供條碼列印。使用此款條碼軟體元件您可以以完美效果生成和列印所有用於工業和商業條碼符號。 無法載入TBarCode11_
python網路爬蟲系列教程——python中BeautifulSoup4庫應用全解
全棧工程師開發手冊 (作者:欒鵬) python中BeautifulSoup4庫的基礎應用,網頁資料探勘的常用庫之一。也就是說最主要的功能是從網頁抓取資料。 使用前需要先安裝BeautifulSoup庫點選下載 python3.
Scrapy網路爬蟲系列教程(一) | Scrapy爬蟲框架的開發環境搭建
本文主要介紹一下Scrapy爬蟲框架的開發環境搭建。主要有: Python的安裝,IDE的選擇,MySQL及Navicat的安裝,開發環境Virtualenv、Virtualenvwrapper的搭建以及Scrapy的安裝。 Pytho