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

web字體標題

發布時間: 2022-08-19 17:20:27

⑴ Web頁面的字體有哪些

是這樣的,手機的屏幕有大有小,移動web最好做成響應式布局,也就是自適應屏幕,沒有固定寬高,這樣的話,在所有手機上都可以正常顯示。ico的話可以使用字體圖標,現在大部分手機瀏覽器都支持html5和css3的。

⑵ Word文檔中帶Web格式的字體怎麼修改

alhagi的回答是對的。但根據你描述的:拷到記事本里都沒用,那我就不清楚了。
我的分析如下:拷回記事本,肯定會把所有格式去掉的。你再拷回來又重新出現,說明是word的問題。
那麼解決辦法可能如下:你把格式帶到了word裡面,你把文字拷走,格式還在。所以你需要重新建一個空白文檔,再從記事本里拷到空白文檔里,應該不會再出現了。
試試吧。完畢。

⑶ web端的設計中,標題性文字通常以多少號字體以上為主

中文網站一般默認就是宋體跟微軟雅黑,因為你的電腦上面的字體別的電腦上面不一定有,而宋體、微軟雅黑基本上是 Windows 自帶字體,如果考慮到用戶體驗,所以盡量避免用一些系統本身沒有的字體。

英文網站一律是 Verdana。
下面是常用默認字體的呈現及用法:
中易宋體(SimSun,TrueType),又叫簡體中文:Win最常見的字體,小字體點陣,大字體TrueType,但是大字體並不好看,所以最好別做標題。
微軟雅黑:Vista之後新引入的字體,打開Cleartype之後顯示效果不錯,不開Cleartype發虛。

Verdana:是一套無襯線字體,它在小字上有結構清晰端整、閱讀辨識容易等高品質表現,成為許多領域愛用的標准字型之一。
華文細黑:Mac下的默認中文。
Droid Sans和衍生的WenQuanYi Microhei:Andriod中的中文,也是Linux絕大多數發行版本的默認中文,,當然也有用WenQuanyi Zenhei的,不過比較少了。

⑷ 如何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 中新增的。

⑸ web前端怎麼設置字體

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

⑹ 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>

⑺ 如何定義標題最恰當 符合Web標准

文檔標題是文檔的最主要的組成部分,也是搜索引擎蜘蛛爬行時最關注的內容,該如何定義標題呢?要回答這個問題,先設想我們要在一個頁面上定義文章的標題,通常我們有三個方法來實現這個簡單目的: A、沒有語義的標題定義: <span class="heading">文章標題</span> 雖然在某些情況下<span>會是一個方便的標簽,但它並不能表達出標題的完整含義。採用這個方法的一個好處是,我們可以對它附加一個CSS規則,使其文字象標題一樣顯示。 .heading { font-size: 24px; font-weight: bold; color: red; } 現在所有的標題都用heading class標記成了大號的粗體字體,並且為紅色。但是這樣做對嗎?如果有人用一個不支持CSS的瀏覽器來觀看,會是什麼樣的狀況呢? 盡管class="heading"為這個標簽增加了一點意義,但<span>仍然只是一個普通的標簽,可以被大多數瀏覽器的預設樣式所修改掉。 搜索引擎檢索這個頁面時會略過<span>標簽,就好象它不存在一樣,不會對其可能包含的關鍵字給於一點額外的重視。在後面我們會更多的談到搜索引擎和標題的關系。 最後,由於<span>標簽是一個內嵌元素,我們可能需要把它嵌套在一個額外的塊級元素中,比如<p>標簽或<div>標簽,為的是使它能夠形成單獨的行,這會進一步被非必要的代碼弄亂你的標簽。而這些額外增加的標簽卻是必須的,這樣才能使不支持CSS的瀏覽器顯示出沒有差別的文本。 B、無助的<p>和<b>組合 <p><b>文章標題</b></p> 使用一個段落標簽,將會給我們帶來塊級的顯示,<b>會把文本變成粗體。但是用這個方法標記一個重要的標題時,我們面對的是同樣無意義的結果。 不象方法A,<b>標簽能在可視化的瀏覽器中把文字顯示成粗體——甚至在不支持CSS的瀏覽器中。但是和<span>標簽一樣,搜索引擎也不會因為有一些東西在段落中被加粗了而給予更高的優先。 難以設計樣式 用普通的<p>和<b>的組合,也帶來了另一個缺憾——無法把這個標題設計成不同於其他段落的樣式。我們可能想用一個特別的樣式來突出標題,來使頁面內容更清晰更具結構,但是用這個方法只能使其顯示成粗體。 C、樣式加實質 <h1>文章標題</h1> 恩,多麼好的標題定義。大多數的網頁設計者對它都很熟悉。其實適當的使用它們,<Hn> 就能為頁面內容提供靈活的、可索引的、以及可樣式化的結構。 這也是聰明的定義方法,你會發現它很簡單。不再需要額外的標簽,你可以說,這僅僅比另外兩個方法節省了一點點的位元組,可以忽略不計,但節省一點是一點。 <h1>一直到<h6>,代表了標題的六個級別,從最重要的(<h1>)到最次要的(<h6>)。他們本身就是塊級的,不需要增加其它元素來使其單獨成行。簡單,有效——就是好工具。 為標題輕松定製樣式 因為我們使用<h1>標簽是唯一的,而<b>或<p>標簽更適合使用在整個頁面,所以我們可以用各種各樣的CSS方法來樣式化。 更重要的是,盡管完全不用樣式,一個標題標簽也能明顯的表示出一個標題!可視化的瀏覽器把 <h1>顯示成更大的粗體。一個非樣式化的頁面將以被期望的那樣顯示文檔結構,用適當的標題標簽來傳達意思。 屏幕閱讀器、PDA、手機、以及可視化的和非可視化的瀏覽器都會明白,碰到一個標題標簽時該做的事情,正確的處理,比頁面上的普通文本更重視的來對待。而使用<span>標簽,那些不支持CSS的瀏覽器就不會特別的對待它。 討厭的默認樣式 以往,由於瀏覽器默認的預設值非常的醜陋,設計者們也許會避免完全的使用標題標簽。或者,因為預設值的巨大尺寸而避免使用<h1>或<h2>,取而代之的是用更高數值的標題標簽來實現更小的尺寸。 然而,需要重點強調的是,我們可以很簡單的用CSS來改變這些標題標簽——舉個例子,一個<;h1>並非一定是占滿大半屏幕的巨大標版。在後面,我將證明用CSS來樣式化標題標簽是多麼的簡單,希望可以幫助你減輕巨大的恐懼。 對搜索引擎的友好 這是一個巨大的好處。搜索引擎喜歡標題標簽。另一方面,一個<span>標簽或者普通的加粗的段落標簽卻在意味著次要一點。適當的用<h1>到<h6>標記你的標題,只需要你的一點點努力,然而卻讓搜索引擎更容易的檢索到你的頁面,讓人們最終能找到它們。 搜索引擎機器人會給予標題標簽特別的關注——這是你可能放置一些關鍵詞的地方。就象檢索到 <title>和<meta>,它們會順著標題標簽往頁面下面查找。如果你不使用這些標簽,那麼包含在裡面的關鍵詞將不會被認為是有價值的,從而被忽略掉。 所以只要付出一點點的努力,你就能增加人們基於頁面的內容找到你的站點的可能性。聽上去不錯,不是嗎? 關於標題的次序 在範例中,這個特別的標題是頁面中最重要的,因為它是文檔的標題。因此,我們使用最重要的標題標簽,<h1>。順應W3C的規范,一些人認為跳過數個標題級是個不好的使用。舉個例子,想像我們在下面的頁面: <h1>文章標題</h1> 我們接下去的標題(如果不是用另一個<h1>重復的話)應該是<h2>,然後是<h3 >,等等。你也許不應該在<h1>後面跳過一級,直接跟上<h3>。我傾向於同意以上的觀點,順著行文保持級別的連續性,來構造一個排版結構。這樣的話,給一個已經存在的頁面添加標題和樣式就更容易了,你會減少因使用超出的數字而導致的錯誤。 前面提到的,設計者也許會用<h4>來標簽一個頁面上最重要的標題,僅僅是因為它的預設的字體尺寸不象<h1>那樣令人生厭的巨大。但是記住,先結構,後設計。我們總是能用CSS來把標題樣式化成任何我們喜歡的文字尺寸。 簡單的樣式 使用CSS,最容易做的事情就是給我們的標題設置不同的字體樣式。我們可以建立一個CSS規則,它將把樣式應用到頁面中出現的所有<h1>標簽(或者是整個站點,當使用一個外部樣式表的時候)。隨後,如果我們想要改變整個站點上所有出現<h1>標簽的地方的顏色、尺寸、字體的話,我們所有需要做的事情就是修改一些CSS規則,然後它們將立即改變。聽上去非常誘惑人,不是嗎?

記得採納啊