網頁文字設計_網頁設計中如何讓把文字放在圖片上顯示

1、網頁設計中最常用的字體有哪些

1、Georgia字體

基本上適合正文屏顯的襯線字體，非Georgia莫屬了。筆畫粗重，襯線明線，輪廓較大，小字體顯示也很清晰，同時細節還算OK。

2、Times字體

Times是為了報紙而設計的，特點是可以在有限的空間塞進去更多的文字，筆畫較弱，小字型大小正文屏顯看起來累眼。曾經Engadget改版的時候用了Times作為正文，被罵得很慘之後換成了Georgia。

3、Arial字體

Helvetica的「克隆」，和Helvetica非常像，細節上比如R和G有小小差別。如果字型大小太小，文字太多，看起來會有些累眼。Win和Mac顯示都正常。

4、Lucida Family字體

Lucida Grande是Mac OS UI的標准字體，屬於humanist風格，稍微活潑一點。Mac下的顯示要比Win下好。

5、Verdana字體

專門為了屏顯而設計的字體，humanist風格，在小字型大小下仍可以清楚顯示，但是字體細節缺失嚴重，最好別做標題。

6、Tahoma字體

也是humanist風格，字體和Verdana有點像，但是略窄一些，counter略小，曾經是Windows的標准字體，Mac 10.5之後默認也有安裝。

2、網頁設計中如何讓把文字放在圖片上顯示

方法有很多
給你介紹一個最簡單的
<div
style="width:200px;
height:200px;
background-image:url(MDgxOTE3LXRoNXh4Nw==.jpg)">
div設置背景圖片
</div>
其次還可以通過div的定位來做
還有就是通過水印來做
總之更具不同的需求用不同的方法
靈活多變

3、網頁前台設計，css怎麼實現文字豎排版?

一、使用writing-mode屬性
語法:writing-mode:lr-tb或writing-mode:tb-rl
參數:
1、lr-tb:從左向右，從上往下
2、tb-rl:從上往下，從右向左
運行代碼發現，IE顯示正常，火狐卻不行，所以不建議使用writing-mode屬性，下面使用模擬方法實現。
二、模擬文字豎排
代碼:
ul{width:100px;height:80px;overflow:hidden;list-style:none;}
ul
li{float:right;display:inline;margin-left:4px;width:14px;height:100px;font-size:14px;word-wrap:break-word;word-break:nomal;}
此方法讓li右浮動，設置li寬度和字寬度一樣都是14px，這樣就自動換行了。另外，「word-wrap:break-word;word-break:nomal;」這句實現標點自動換行(連續字元自動換行)。

4、可以把網頁的文字設計成這種樣子嗎

你發的這個網址里文字是圖片的，網頁里可以插入已經設計好的文字或是圖片的。

5、如何用css樣式設計整個網站字體

網站字體分為兩種類型，一種是默認字體，一種是外部字體。

默認字體

如果整個網頁都要弄成宋體的話就將body定義為宋體即可，即在樣式表中加入：body{font-family:"宋體"}，如果只要一部分為宋體，那將那一部分的層的字體樣式定義為宋體就行了。

默認的字體有宋體、楷體、黑體、新宋體、仿宋等。

外部字體

樣式表中嵌入外部字體，用@font-face語法。

@font-face{font-family:name;src:<url>;sRules;}

<name>：為自定義字體名稱

<url>：使用絕對或相對地址指定OpenType字體

<sRules>：樣式表定義

如：

@font-face{

font-family:YH;

src:url(http://www.xxx.com/xxx.ttf);

}

然後再設置需要變換字體的樣式即可，如：body{font-family:YH}，字體名稱是上述所說自定義好的名稱。

6、網頁設計中文一般用的字體大小，一般怎麼設置font-family。怎麼用fireworks獲取圖中文字的字體和大小？

一般中文的字體大小是12px或者14px。操作方法如下：

1、打開webstorm軟體，在HTML文件中創建h1到h6六個標簽，分別font-style設置字體風格，italic斜體，normal正常，oblique傾斜，inherit指繼承格式，revert還原字體風格。

2、<br />文本換行顯示，在使用p標簽寫段落文字的時候，在網頁中設置換行但是在實際顯示的時候還是不會有換行的格式顯示，需要在文字中間加上<br />符號，設置換行。

3、設置字體的粗細的情況，根據使用font-weight然後選擇字體粗細，bold粗體，bolder稍粗，如圖所示，可以根據需要設置不同的字體粗細。

4、使用font-size設置字體大小，在css文件上輸入font-size之後系統會自動顯示可以選擇的大小，large，larger等等，也可以直接輸入數字來定義字體的大小。

5、最後運行，如下圖所示，就完成了。

7、網頁設計中的文字排版怎麼設計

關於在網頁設計中排版問題，下面提供我的思路以供參考(宏觀角度)：
第一：先把整體框架搭起來，通過絕對定位確定大的模塊的位置。
第二：根據圖中每一塊的結構來選擇table或者其他布局方式。
第三：需要精確的時候可以用Div塊+CSS來調試，出現細節問題可以查資料解決一下。

8、在網頁設計中如何對文字進行排版的優化

在網頁設計中文字排版可以說是網頁中的主體，排版的樣式和美觀程度能夠直接影響到用戶的體驗，文字排版對網站設計中有哪些影響呢！網站重要的內容信息展示方式就是文字排版，能夠讓訪客有更好的辨識度和易讀性也是有文字排版來決定。那麼文字排版包括字體，顏色，間距等方面，今天就談談文字排版對網站的影響。
1.文字排版行距字間距影響網站閱讀性。

網頁設計中文字不同的間距，不僅影響美觀，也同時影響閱讀性。在大段文字情況下，文字間距還有一行文字的長度都有很高的要求，用戶都是喜歡看清晰文字，如果間距小，每行文字多擠一塊就會顯著亂七八糟的，會讓用戶提不起興趣來再看。
2.文字的顏色影響視覺效果。
文字顏色要看整個網站的風格來搭配顏色，能夠讓文字的顏色搭配的更加舒適。但很少有用比較亮的顏色用著文字的顏色，因為用戶在長時間閱讀文章的時候會引起視覺疲勞，恰當的配色可以讓網站提升魅力。

9、網頁設計文字滾動（水平）代碼

網頁設計文字滾動（水平）代碼是：

<marquee direction=up scrollamount=1 scrolldelay=100

height=60>

<tr>

<td>

共和國

</table>

</marquee>

(9)網頁文字設計擴展資料：

一、除此之外，marquee參數有以下：

BGColor：滾動文本框的背景顏色。

Direction：滾動方向設置，可選擇Left、Right、up和down。

scrolldelay：每輪滾動之間的延遲時間，越大越慢。

scrollamount：一次滾動總的時間量，數字越小滾動越慢。

Behaviour：滾動的方式設置，三種取值：Scroll（循環滾動） lide（單次滾動）、Alternate（來回滾動）。

Align：文字的對齊方式設置。可選擇Middle(居中)、Bottom(居下)還是Top(居上)。

Width：滾動文本框的寬度，輸入一個數值後從後面的單選框選擇in Pixels(按像素)或是in Percent(按百分比)。

Height：滾動文本框的高度，輸入一個數值後從後面的單選框選擇in Pixels(按像素)或是in Percent(按百分比)。

loop：滾動次數。默認為infinite

hspace、vspace：前後、上下的空行。

二、滾動字幕在FrontPage的組件里有，但是FrontPage這個軟體只能支持單行文字，一出現多行文字它就無能為力了，而且它只能支持一行滾動。（如果出現只能滾動一行的情況，解決辦法是把這段代碼嵌入到JavaScript的document.write裡面。）

10、網頁設計文字動態編寫

函數名稱寫錯了，點擊時調用change(),函數名寫成了chang()
在樣式表裡每一句都要用分號（;）隔開，在wordstyle1，wordstyle2，wordstyle3的所有樣式後面都加分號
改正後是這樣的：
<html>
<head>
<style type="text/css">
.wordstyle1{
font-family:fantasy
font-size:20pt
font-weight:500
font-variant:normal
font-style:italic
color:blue
background-color:yellow
}
.wordstyle2{
font-family:verdana;
font-size:26pt;
font-weight:700;
font-variant:small-caps;
font-style:normal;
color:white;
background-color:blue;
}
.wordstyle3{
font-family:cursive;
font-size:32pt;
font-weight:900;
font-variant:small-caps;
font-style:bold;
color:yellow;
background-color:green;
}
</style>
<script language="JScript">
var n,i=0
function change () {
i=i+1
n=i%3
if(n==1) id1.className="wordstyle1"
else if (n==2) id1.className="wordstyle2"
else id1.className="wordstyle3"
}
</script>
</head>
<body>
<p id="id1"class="wordstyle3">
Here are three word style<br>
Please click the buttom to see the change.
</p>
<input type="button" value="change" onclick="change ( )">
</body>
</html>

導航:首頁 > 萬維百科 > 網頁文字設計

網頁文字設計

與網頁文字設計相關的知識