當前位置:首頁 » 網頁前端 » web字體效果
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

web字體效果

發布時間: 2022-05-30 13:47:47

A. web網頁如何使用特殊字體

需要將特殊字體下載下來,放到網站目錄中,然後在css樣式表中引入字體
一般的特殊字體文件是.ttf、.eot、.svg結尾的
比如glyphicons-halflings-regular.ttf
然後在css樣式表中引入字體
@font-face {
font-family: 'Glyphicons Halflings'; /*字體的名字*/
src: url('glyphicons-halflings-regular.ttf') format('truetype'); /*字體文件的路徑*/
}
在樣式表中定義特殊字體的名字和符號對應,比如
.glyphicon-plus {
content: "\2b";
}
在頁面上顯示,可以寫<i class="glyphicon-plus"></i>就可以了
通常特殊字體文件和css是配套的,不然自己去寫名字和符號的對應太麻煩

B. web網頁實現自動變換字體顏色

這里有一個字體渲染實測結果截圖展示。造成渲染區別的主要是以下幾點(wiki: Font rasterization):
字體抗鋸齒:Win7以上自動打開的ClearType(msdn)、常見於Mac OS和MacType的次像素平滑(原理)、常用於Android和iOS等移動設備的灰度渲染
Hinting技術 /wiki
對字重font-weight的支持程度不一(ref)
相對應的控制有:
字體抗鋸齒技術:僅僅只有webkit核支持使用一個CSS屬性來控制字體平滑技術:-webkit-font-smoothing: antialiased;,可以將chrome瀏覽器的字體渲染調為灰度渲染。在The New Yorker、Path等網站中,均使用了這個方案,它可以使webkit內核的瀏覽器字重表現一致。(使用了次像素平滑之後,字重普遍比灰度渲染之後的字體重,效果詳見攜程的這個DEMO)。
Hinting技術:在打包的Webfont字體中加入Hinting,有助於Windows的小字體顯示效果
字重兼容性:出於兼容性的考量,不要使用font-weight的數值形式,也不要在@font-face里指定相應的font-weight數值,可以通過@font-face里定義的字體名來區分字重,如Gabriela-Light和Gabriela-Regular
此外:
小字重字體(W1,W2)的小字型大小、大字重字體(W6以上)的小字型大小在win xp下的顯示很難正常和好看,可以避免使用
在webkit核的字體顯示有問題時,可以使用如-webkit-text-stroke的hack解決問題,詳參How to fix the ugly font rendering in Google Chrome
介面不健全,各個終端表現不一,這基本就是現狀了。Mockee的關於字體渲染的ppt里說到:「接受現實,假設最壞的情況,等待未來新標准、新實現。」
web網頁的問題差不多就是這樣,如果你還有其他疑問,ITjob官網有web前端的文章,你可以自行瀏覽。或者去專業的論壇貼吧問問大神,看有沒有更好的方法。

C. web font怎麼使用中文網頁字體

1、在Web編碼中,CSS默認應用的Web字體是有限的,雖然在新版本的CSS3,我們可以通過新增的@font-face屬性來引入特殊的瀏覽器載入字體。
瀏覽器中展示網頁文字內容時,文字字體都會按照設計師在css中定義的字體族的順序來進行顯示。什麼是字體族?字體族就是你在css代碼中看到「font-family」的代碼內的一類字體名稱,例如下面這行代碼:
font-family:"Comic Sans MS","幼圓","黑體",sans-serif;

按照W3C標准,瀏覽器在解析一行代碼時首先會在系統中查找Comic Sans MS字體,如果系統內存在這個字體那麼瀏覽器就會使用Comic Sans MS字體,如果沒有的話就接著查找幼圓字體,以此類推直到瀏覽器可以表達系統存在的字體為止。
注意了,「sans-serif」不是某個字體的名稱,而是一種在前面敘述的字體都無效時而最終選用的字體,稱為瀏覽器通用字體,它取決於你所用的瀏覽器默認的通用字體是什麼,可能是「Arial」,也有可能是「Helvetica」。
2、網頁常用字體通常分為5類:serif(襯線)、sans-serif(無襯線)、monospace(等寬)、fantasy(夢幻)、cuisive(草體),這些通用的名稱允許用戶代理從相應集合中選擇一款字體。
serif 字體在字元筆畫末端有叫做襯線的小細節,這些細節在大寫字母中特別明顯。
sans-serif 字體在字元筆畫末端沒有任何細節,與serif字體相比,他們的外形更簡單。
monospace 字體,每個字母的寬度相等,通常用於計算機相關書籍中排版代碼塊。
fantasy 和 cuisive 字體在瀏覽器中不常用,在各個瀏覽器中有明顯的差異。
3、網頁常用字體
Sans-serif:
Helvetica: 被評為設計師最愛的字體,Realist風格,簡潔現代的線條,非常受到追捧。在Mac下面被認為是最佳的網頁字體,在Windows下由於Hinting的原因顯示很糟糕。
Arial: Helvetica的「克隆」,和Helvetica非常像,細節上比如R和G有小小差別。如果字型大小太小,文字太多,看起來會有些累眼。Win和Mac顯示都正常
Lucida Family: Lucida Grande是Mac OS UI的標准字體,屬於humanist風格,稍微活潑一點。Mac下的顯示要比Win下好。
Verdana: 專門為了屏顯而設計的字體,humanist風格,在小字型大小下仍可以清楚顯示,但是字體細節缺失嚴重,最好別做標題。
Tahoma: 也是humanist風格,字體和Verdana有點像,但是略窄一些,counter略小,曾經是Windows的標准字體,Mac 10.5之後默認也有安裝。
Trebuchet MS: 為微軟設計的一個humanist風格字體,個人覺得個性太過突出,用得不好會不搭。
Serif:
Georgia: 基本上適合正文屏顯的襯線字體,非Georgia莫屬了。筆畫粗重,襯線明線,輪廓較大,小字體顯示也很清晰,同時細節還算OK。
Times: Times是為了報紙而設計的,特點是可以在有限的空間塞進去更多的文字,筆畫較弱,小字型大小正文屏顯看起來累眼。曾經Engadget改版的時候用了Times作為正文,被罵得很慘之後換成了Georgia。
中文:
宋體:Win最常見的字體,小字體點陣,大字體TrueType,但是大字體並不好看,所以最好別做標題。
微軟雅黑:Vista之後新引入的字體,打開Cleartype之後顯示效果不錯,不開Cleartype發虛。
華文細黑:Mac下的默認中文。
4、寫個小demo,在各種瀏覽上測試了一下,各種瀏覽器對這個字體的解析還是有差異的。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>font</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="author" content="@my_programmer">
<style type="text/css">
/*重置{*/
*{ padding:0;margin:0;} img{border:0;} li{list-style:none;}
/*}重置*/
div{font-size:1.2em;}
</style>
</head>
<body>
<br/>
--網頁字體通常分為5類--
<div style="font-family: sans-serif;">你好 hello world sans-serif(無襯線) </div>
<div style="font-family: serif;">你好 hello world serif(襯線) </div>
<div style="font-family: monospace;">你好 hello world monospace(等寬) </div>
<div style="font-family: fantasy;">你好 hello world fantasy(夢幻) </div>
<div style="font-family: cuisive;">你好 hello world cuisive(草體) </div>
<br/>
--無襯線類--
<div style="font-family: Helvetica, sans-serif;">你好 hello world Helvetica </div>
<div style="font-family: Arial, sans-serif;">你好 hello world Arial </div>
<div style="font-family: 'Lucida Grande', sans-serif;">你好 hello world Lucida Grande </div>
<div style="font-family: Verdana,sans-serif;">你好 hello world Verdana </div>
<div style="font-family: Tahoma, sans-serif;">你好 hello world Tahoma </div>
<div style="font-family: 'Trebuchet MS', sans-serif;">你好 hello world Trebuchet MS </div>
<br/>
--襯線類--
<div style="font-family: Georgia, serif;">你好 hello world Georgia </div>
<div style="font-family: Times, serif;">你好 hello world Times </div>
<br/>
--中文字體--
<div style="font-family: 宋體">你好 hello world 宋體 </div>
<div style="font-family: 微軟雅黑">你好 hello world 微軟雅黑 </div>
<div style="font-family: 華文細黑">你好 hello world 華文細黑 </div>
<div style="font-family: 黑體">你好 hello world 黑體 </div>

</body>
</html>

D. web前端怎麼設置字體

<h1
style="
font-family:"微軟雅黑";font-size:20px;color:red;
">標題的字體設置</h1>
上面用的內聯樣式設置了
文字內容的字體類型是:「微軟雅黑」,字體大小20像素,顏色為紅色。

E. 手機web字體css怎麼設置微軟雅黑

{font-family:"微軟雅黑";}或者{font-family:"Microsoft Yahei";}
如果在文件編碼(GB2312、UTF-8 等)不匹配時會產生亂碼的錯誤,

為此,在 CSS 直接使用 Unicode 編碼來寫字體名稱可以避免這些錯誤。

使用 Unicode 寫中文字體名稱,瀏覽器是可以正確的解析的。

unicode編碼的微軟雅黑表示如下:
{font-family: "5FAE8F6F96C59ED1"}

F. 如何WEB中把字體加粗

我不太清楚你到底要做什麼,你貼出來的三段代碼,分別表示了三段不同的 區隔標記 ,而且後兩段都沒有結束區域的符號,三段中也沒有內容或文字,所以不知道你是想在哪一個區域把哪些文字加粗。
如果你是自己做網頁,使用HTML語言,Dreamweaver裡面的功能輕輕鬆鬆可以幫你實現你要的操作。
如果你是在瀏覽網頁是看人家的源代碼,你即使修改了,也只能在自己本地瀏覽啊,那何不用Dreamweaver打開更方便。

最後,認真回答你的問題。<DIV align="center"><FONT face="宋體"><strong>你要輸入的字</strong></FONT></DIV> 是沒錯的,「你要輸入的字」就是被加粗的部分,並在這個區域內被居中。

給你提供一些HTML代碼,自己研究下吧。

標記 類型 譯名或意義 作 用 備注
文件標記
<HTML> ● 文件聲明 讓瀏覽器知道這是 HTML 文件
<HEAD> ● 開頭 提供文件整體資訊
<TITLE> ● 標題 定義文件標題,將顯示於瀏覽頂端
<BODY> ● 本文 設計文件格式及內文所在
排版標記
<!--註解--> ○ 說明標記 為文件加上說明,但不被顯示
<P> ○ 段落標記 為字、畫、表格等之間留一空白行
<BR> ○ 換行標記 令字、畫、表格等顯示於下一行
<HR> ○ 水平線 插入一條水平線
<CENTER> ● 居中 令字、畫、表格等顯示於中間 反對
<PRE> ● 預設格式 令文件按照原始碼的排列方式顯示
<DIV> ● 區隔標記 設定字、畫、表格等的擺放位置
<NOBR> ● 不折行 令文字不因太長而繞行
<WBR> ● 建議折行 預設折行部位
字體標記
<STRONG> ● 加重語氣 產生字體加粗 Bold 的效果
<B> ● 粗體標記 產生字體加粗的效果
<EM> ● 強調標記 字體出現斜體效果
<I> ● 斜體標記 字體出現斜體效果
<TT> ● 打字字體 Courier字體,字母寬度相同
<U> ● 加上底線 加上底線 反對
<H1> ● 一級標題標記 變粗變大加寬,程度與級數反比
<H2> ● 二級標題標記 將字體變粗變大加寬
<H3> ● 三級標題標記 將字體變粗變大加寬
<H4> ● 四級標題標記 將字體變粗變大加寬
<H5> ● 五級標題標記 將字體變粗變大加寬
<H6> ● 六級標題標記 將字體變粗變大加寬
<FONT> ● 字形標記 設定字形、大小、顏色 反對
<BASEFONT> ○ 基準字形標記 設定所有字形、大小、顏色 反對
<BIG> ● 字體加大 令字體稍為加大
<SMALL> ● 字體縮細 令字體稍為縮細
<STRIKE> ● 畫線刪除 為字體加一刪除線 反對
<CODE> ● 程式碼 字體稍為加寬如<TT>
<KBD> ● 鍵盤字 字體稍為加寬,單一空白
<SAMP> ● 範例 字體稍為加寬如<TT>
<VAR> ● 變數 斜體效果
<CITE> ● 傳記引述 斜體效果
<BLOCKQUOTE> ● 引述文字區塊 縮排字體
<DFN> ● 述語定義 斜體效果
<ADDRESS> ● 地址標記 斜體效果
<SUB> ● 下標字 下標字
<SUP> ● 上標字 指數(平方、立方等)
清單標記
<OL> ● 順序清單 清單項目將以數字、字母順序排列
<UL> ● 無序清單 清單項目將以圓點排列
<LI> ○ 清單項目 每一標記標示一項清單項目
<MENU> ● 選單清單 清單項目將以圓點排列,如<UL> 反對
<DIR> ● 目錄清單 清單項目將以圓點排列,如<UL> 反對
<DL> ● 定義清單 清單分兩層出現
<DT> ○ 定義條目 標示該項定義的標題
<DD> ○ 定義內容 標示定義內容
表格標記
<TABLE> ● 表格標記 設定該表格的各項參數
<CAPTION> ● 表格標題 做成一打通列以填入表格標題
<TR> ● 表格列 設定該表格的列
<TD> ● 表格欄 設定該表格的欄
<TH> ● 表格標頭 相等於<TD>,但其內之字體會變粗
表單標記
<FORM> ● 表單標記 決定單一表單的運作模式
<TEXTAREA> ● 文字區塊 提供文字方盒以輸入較大量文字
<INPUT> ○ 輸入標記 決定輸入形式
<SELECT> ● 選擇標記 建立 pop-up 卷動清單
<OPTION> ○ 選項 每一標記標示一個選項
圖形標記
<IMG> ○ 圖形標記 用以插入圖形及設定圖形屬性
連結標記
<A> ● 連結標記 加入連結
<BASE> ○ 基準標記 可將相對 URL 轉絕對及指定連結目標
框架標記
<FRAMESET> ● 框架設定 設定框架
<FRAME> ○ 框窗設定 設定框窗
<IFRAME> ○ 頁內框架 於網頁中間插入框架 IE
<NOFRAMES> ● 不支援框架 設定當瀏覽器不支援框架時的提示
影像地圖
<MAP> ● 影像地圖名稱 設定影像地圖名稱
<AREA> ○ 連結區域 設定各連結區域
多媒體
<BGSOUND> ○ 背景聲音 於背景播放聲音或音樂 IE
<EMBED> ○ 多媒體 加入聲音、音樂或影像
其他標記
<MARQUEE> ● 走動文字 令文字左右走動 IE
<BLINK> ● 閃爍文字 閃爍文字 NC
<ISINDEX> ○ 頁內尋找器 可輸入關鍵字尋找於該一頁 反對
<META> ○ 開頭定義 讓瀏覽器知道這是 HTML 文件
<LINK> ○ 關系定義 定義該文件與其他 URL 的關系
StyleSheet
<STYLE> ● 樣式表 控制網頁版面
<span> ● 自訂標記 獨立使用或與樣式表同用

註:

● 表示該標記屬圍堵標記,即需要關閉標記如 </標記>。
○ 表示該標記屬空標記,即不需要關閉標記。
IE 表示該標記只適用於 Internet Explorer。
NC 表示該標記只適用於 Netscape Communicator。
反對 表示該標記不為 W3C 所贊同,通常這標記是 IE 或 NC 自訂,且己為眾所支 持,只是 HTML 標准中有其它同功能或更好的選擇。
棄用 表示該標記己為 W3C 所棄用,是過時的標記,但 HTML 具向下兼容的特 性,不用擔心新瀏覽器不支援舊標記。
新 表示該標記是 HTML 4.0 中新增的。

G. 在web中如何設置字體的大小和顏色,語法是什麼時候

首先font是一對常規標簽,將字體文本內容放入標簽內,font標簽內設置color顏色+對應顏色值即可設置font標簽對象內字體顏色。

H. Axure8 web字體使用無效,求助

2、也可以用右鍵點擊要安裝的字體文件,出現下拉菜單,==》選擇下面一個選項:以快捷方式安裝,這一種安裝只是將字體文件的快捷方式安裝進fonts文件夾,

I. 在後台富文本編輯器裡面加入HTML特效代碼,從而在web端實現文字特效

一般意義上講:不需要服務端額外支持,能夠直接或是通過載入程序在我們客戶端運作,例如:html頁、GIF動畫、Flash、js、vs等,文件後輟名通常為.htm.html.xml、shtml等。而動態網頁呢?需要伺服器資料庫的支持,通過腳本語言與資料庫交換信息,再以網頁或者其他可視性的方式顯示給客戶端。例如:論壇注冊、登錄、管理、發帖、回復。大到政府銀行、小到購物炊食,使用范圍極其廣泛。後輟名通常為:.asp.jsp.php等。你說的文章更新,也是一個典型的應用,當你觸發了某個語言環境(比如點了哪個按紐),直接反饋到了伺服器。再由伺服器根據語言命令返回信息,是更新、更改或是刪除等等。