导航:首页 > 万维百科 > 网页文字设计

网页文字设计

发布时间:2020-07-22 13:12:54

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>

<!-- head_scrolltext -->

<tr>

<td>

共和国

</table> <!-- end head_scrolltext -->

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

与网页文字设计相关的知识