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

前端字體選用格式

發布時間: 2022-09-14 14:46:26

1. 前端pc端如何在根目錄設置字體大小

選中目錄內容,打開電腦的文檔,選中目錄內容。點擊字體,滑鼠右擊,點擊字體選項。選擇字型大小,選擇上面的字型大小即可。
打開需要修改目錄字體大小的文檔,在文檔裡面點擊引用,目錄。進入到目錄頁面角後點擊導航欄中的目錄選項。切換到目錄界面之後,點擊下面的修改選項。然後在樣式裡面選中需要修改的目錄,點擊下面的修改選項。進入到修改樣式頁面之後,在格式裡面選中需要的字體,並選擇字型大小大小,然後設置字體顏色,點擊確定即可。
前端字體設置大小控制來源,決定著顯示在頁面上字體大小,為了方便後期處理起來方便最好先設定一個字體大小。

2. 網頁上常見的字體是什麼字體

字體在網站中扮演了相對重要的一個角色,所以在網站中,選用什麼樣的字體也是一個相對比較重要的工作。今天跟大家分享下在網站當中常用的8款字體。

都知道,字體主要分為稱線字和無稱線字。其實細分的話還有等寬字體、夢幻字體和花體字。但今天我們主要針對常用的稱線字和非稱線字來講。

稱線字和非稱線字的區別可以看下圖:

可以看到左邊的中文和英文字屬於稱線字,右邊中文和英文屬於非稱線字。稱線字指的是在字的筆畫開始、結束的地方有額外的裝飾,而且筆畫的粗細會有所不同。比如我們常用的宋體,觀察比劃可以看到橫細豎粗的特點,這就是典型的稱線字。非稱線字也叫無稱線字,無襯線字體沒有這些額外的裝飾,而且筆畫的粗細差不多。比如微軟雅黑。

稱線字體容易識別,它強調了每個字母筆畫的開始和結束,因此易讀性比較高,非稱線字則比較醒目。所以,在使用的過程中需要根據網站的定位而選擇相應的字體。

下面簡單給大家介紹網頁中常用的幾種字體:

1、微軟雅黑

Vista之後新引入的字體,這個字體的使用率不用說了,可以說是web裡面最安全的一個字體。字體方正、簡潔,被廣泛使用。

上海大眾這個網站默認的首選字體就是微軟雅黑,整體比較簡潔。

2、黑體

黑體字和微軟雅黑差不多,作為非稱線字中的一種,一樣具備方正、簡潔、醒目的特點。這樣的字體特別適合當標題。其實黑體在使用上沒有微軟雅黑來得清晰明亮,一般在微軟雅黑和黑體的選擇下,個人更傾向微軟雅黑。

佳能的官網默認首選的字體就是黑體,字體簡潔醒目。

3、華文細黑

華文細黑是Mac下的默認中文,這套字體跟前面的微軟雅黑相比較,更顯絹細、秀氣。筆劃細節比微軟雅黑處理的多一些,所以整體給人比較精緻的感覺。注意一下,華文細黑並不是所有電腦的自帶字體,當網站文字用到這個字體的時候,是需要在自己電腦上下載這套字體的。除此,在寫css代碼的時候,font-family應該設置的選擇性多一下,以保證界面打開的最佳效果。

這個字體就不給大家做展示效果了,因為這個不是系統的默認字體,電腦上沒有安裝這個字體的也看不到網頁的原始效果。

4、中易宋體

前面介紹的三款字體都是非稱線字,接著要介紹的是稱線字體——中易宋體,簡稱宋體。宋體在我們的日常中使用范圍也很廣,這是電腦自帶的其中一種字體。宋體是為適應印刷術而出現的一種漢字字體。筆劃有粗細變化,常用於書籍、雜志、報紙印刷的正文排版,所以在大篇幅文章的設計時,可以採用宋體。這個字體是Windows系統下最常見的字體,小字體點陣,大字體TrueType。大標題顯示時字體不是很好看,所以一般不建議用宋體來當標題。

上海漢路律師事務所的網站就是採用了宋體字,這種字體的選擇一般出現在一些個性比較強的網站中,傳統、專業、公正、官方、權威,宋體就表現了這種特點。

5、 Arial

說到Arial,這套字體是微軟公司網頁核心字體之一,最常用的sans serif字體,當字型大小很小時不容易閱讀。但是,大寫的「I」和小寫的「l」是無法區別的,所以一般可以考慮用Tahoma字體來替代。這套字體方正、不花巧、方便閱讀和印刷清晰。使用范圍也是特別的廣泛。但是要知道的是,蘋果系統下是沒有這套字體的,蘋果系統下默認的是Helvetica。

可以看下禪道項目管理軟體的英文網站,幻燈片採用的字體就是Arial,可以看下這套字體在幻燈片下粗細的組合形態。

6、Tahoma

Tahoma是英文Windows操作系統的默認字體,這個字體比較均衡,是種非常圓滑的字體。這個字體和中文混排顯示時,不會出現中英文不對齊的狀態。這套字體解決了Arial大寫「I」與小寫「l」難以分辨的問題。也相當於在Arial上優化了不少。除此,細看這套字體,可以發現其實在一些筆劃的處理上還是很精緻的。

zui前端框架網站,英文字體的設置上也用到了這個字體,雖然不是第一優先選擇,但是可以看出Tahoma這套字體的使用率也是很高的。

7、Helvetica

說到Helvetica這套字體,應該是設計師們的最愛了吧。這套字體屬於 Realist風格,擁有簡潔現代的線條,受到大部分設計師的追捧。這種字體給人一種簡單、現代化、休閑輕松的感覺。適用於扁平化設計,也適合搭配任何設計項目,包括banner、平面設計以及網頁字體等。在Mac下面被認為是最佳的網頁字體,但在Windows下由於Hinting的原因顯示很糟糕。

這個字體主要體現在蘋果官網上,可以看下美國的官網。

8、Georgia

說到英文的稱線字,肯定首選是Georgia。這套字體筆劃粗重,襯線明線,輪廓較大,小字體顯示也很清晰,同時細節還不錯。此種字體風格優雅又精緻,可用於電影海報、游戲、時尚類網頁設計中。

林肯的官網,Georgia是官網的第二優先選擇顯示的字體。網站比較現代,在一些幻燈片當中結合了Georgia字體,稱線字和非稱線字的相結合,可以使得整個網站更生動。

在專業的網頁設計里,除了Banner圖、廣告語等特殊情況可能會用到特殊字體,網頁中使用的字體以不超過2種為准,並且最好採用標准字體,比如中文的宋體、微軟雅黑,英文的Arial、Helvetica。只有使用這些系統自帶的字體,才能讓前端開發人員在排版時高程度地還原設計稿的文字效果。倘若使用了特殊字體,在設計font-family的時候,應該多設置幾種字體的優先順序,以確保網頁顯示的最佳效果。當然,我們一般情況下建議使用系統自帶的字體。

以上8種網站中常用的字體介紹和示例,希望可以對大家有所幫助。

3. 我想問前端的大神這個頁面的字體什麼到底是什麼字體

font:14px/24pxarial,"5b8b4f53",sans-serif,tahoma,"MicrosoftYaHei";

4. 設計師 前端 怎麼規範字體大小

可以提前預定p span dt h1 h2等字體大小 有的區塊根據自己的設計而定 一般12px或者14px

5. 在html中,用於設置字體格式的標記有哪些

語法:

font:[ [ <font-style> || <font-weight> ][ <font-size> <font-family> ]

默認值:看獨立屬性自身

取值:

<font-style>:
指定文本字體樣式

<font-variant>:
指定文本是否為小型的大寫字母

<font-weight>:
指定文本字體的粗細

<font-size>:
指定文本字體尺寸

<line-height>:
指定文本字體的行高

<font-family>:
指定文本使用某個字體或字體序列
這是一段修飾文字的代碼:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>font_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), [email protected]" />
<meta name="right" content="www.doyoe.com" />
<style>
.test p{margin:15px 0;border:1px solid #000;}
.font1 p{font:18px Simsun,arial,sans-serif;}
.font2 p{font:italic 18px Simsun,arial,sans-serif;}
.font3 p{font:italic small-caps 18px Simsun,arial,sans-serif;}
.font4 p{font:italic small-caps bold 18px Simsun,arial,sans-serif;}
.font5 p{font:italic small-caps bold 18px/2 Simsun,arial,sans-serif;}
.caption p{font:caption;}
.icon p{font:icon;}
.menu p{font:menu;}
.message-box p{font:message-box;}
.small-caption p{font:small-caption;}
.status-bar p{font:status-bar;}
</style>
</head>
<body>
<ul class="test">
<li class="font1">
<strong>只指定字體大小和字體:</strong>
<p>本段文字將顯示為18px宋體。</p>
</li>
<li class="font2">
<strong>只指定字體樣式、大小和字體:</strong>
<p>本段文字將顯示為斜體的18px宋體。</p>
</li>
<li class="font3">
<strong>只指定字體樣式、小型大寫字母、大小和字體:</strong>
<p>本段文字將顯示為斜體的帶小型大寫字母的18px宋體。大小型大寫字母對比:AaBbCcDdEeFfGg</p>
</li>
<li class="font4">
<strong>只指定字體樣式、小型大寫字母、粗細、大小和字體:</strong>
<p>本段文字將顯示為斜體的帶小型大寫字母的加粗18px宋體。</p>
</li>
<li class="font5">
<strong>只指定字體樣式、小型大寫字母、粗細、大小、行高和字體:</strong>
<p>本段文字將顯示為行高為2的斜體的帶小型大寫字母的加粗18px宋體。</p>
</li>
<li class="caption">
<strong>指定字體為caption:</strong>
<p>本段文字將以caption的字體顯示。</p>
</li>
<li class="icon">
<strong>指定字體為icon:</strong>
<p>本段文字將以icon的字體顯示。</p>
</li>
<li class="menu">
<strong>指定字體為menu:</strong>
<p>本段文字將以menu的字體顯示。</p>
</li>
<li class="message-box">
<strong>指定字體為message-box:</strong>
<p>本段文字將以message-box的字體顯示。</p>
</li>
<li class="small-caption">
<strong>指定字體為small-caption:</strong>
<p>本段文字將以small-caption的字體顯示。</p>
</li>
<li class="status-bar">
<strong>指定字體為status-bar:</strong>
<p>本段文字將以status-bar的字體顯示。</p>
</li>
</ul>
</body>
</html>

復制上面這段代碼編輯成.html格式文件用瀏覽器打開即可查看文字屬性信息,如果沒有編輯軟體那就使用記事本編輯保存文件後綴為.html打開即可

6. 前端設計中,哪些中文字體兼容性好又好看

一般情況下中文字體:微軟雅黑或者宋體

這個都算比較正統標準的,要說到好看中文字體真沒啥好看的,一般花俏好看的字體都是英文偏多,中文還是比較中規中矩的。

7. web前端怎麼設置字體

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

8. 前端001css樣式font字體屬性

1.如果想要設置字體樣式可以使用font-family

2.如果想要設置加粗可以使用font-weight

3.如果想要設置傾斜可以使用font-style

4.如果想要設置字體大小可以使用font-size

上述樣式如果想要在一個選擇器中使用的話,一下寫4個會顯得比較冗餘,那麼我們可以簡化綜合復合如下的樣式

選擇器 {font :font-style font-weight font-size/line-height font-family}順序不可顛倒 其中  font-size和font-family必須保留  否則不會起作用

9. web前端字體定義有哪倆種方式

微軟公司的網頁核心字體之一,最常用的sans serif字體,當字型大小很小時不容易閱讀。但是,大寫的「I」和小寫的「l」是無法區別的,你可以考慮用Tahoma字體來替代。

10. APP界面設計中的字體設計原則

設計文字時應保證文字辨識度高和信息傳達的准確性。相對於圖片文字擁有更加清晰准確的表達能力,使得用戶能更加清晰從APP中獲取信息信息,界面內容也更加直觀。文字設計要遵循以下原則:



用語要簡潔,信息內容清楚,避免使用專業的語言,同時減少不必要的修飾詞語,使得用戶可以更加迅速的理解手機APP的功能,文字布局上也應做到排版布局合理,結構層次清晰。


1. 親近感與柔和感


尖銳的物體會給人帶來危險的感覺,文字也有同樣的心理作用,想要文字給人帶來溫柔的感覺,首先應使用線條粗一些、前端渾圓的字體,最好是手寫體;其次避免使用黑色或藏藍色的文字,應選取與背景顏色亮度差異較小的暖色。


2. 未來性與先進性


應選擇裝飾性弱的無襯線體和黑體,或者利用圖形組成具有“圖形化”的文字,需要注意的是,越是抽象的字識別性越低,這種字可以用在logo上,注意小范圍使用。顏色則可以考慮黑白灰這些簡單的配色。


3. 纖細與美麗


女性化的文字通常給人優美、纖細的印象,需要選用線條細且有曲線的字體,流暢的手寫細線體可以運用在女性產品上,更能給人帶來嬌媚的視覺效果。


4. 懷舊與復古


字體的設計具有流行性,所以字體的設計通常可以反映出流行的趨勢。在字體設計時要選用與背景顏色差異大的色彩,比如黑色的粗字體配上明亮的背景色,視覺的沖擊力在哪裡運用都不會減弱。


字體設計的節奏感體現在字型大小對比、重量對比、色彩對比上。當字型大小越大時,文字就會顯得越重要,字型大小的大小變化能讓版面展現出強弱變化;最引人注意的標題,在版面中會比其他字體更粗;重要的文字可以換作其他顏色加以區分,紅、黃、橙等暖色被稱為前進色,它們比藍、綠這些冷色更能起到吸引人眼球的作用。


以上就是APP界面設計中的字體設計相關分享,希望對大家的設計之路有所幫助。另外,小編想說, 不同風格的字體會給人帶來不同的視覺體驗,所以大家要關注這一點。