网页设计怎么设置文字 网页设计怎么设置文字大小

字体涉及各行各业，在设计领域的应用范围很广泛，除了我们常见的平面设计外，网页设计对字体的要求也是有一定的规范可言的，其主要的元素主要有三点。接下来小编告诉你网页设计怎么设置文字。

1、字体的大小设置

网页中字体大小不要乱设置，最好以系统默认为宜，一般是12PT，现在网络上最流行的小中文字体大小为9pt。

CSS2规范根据长度、水平和垂直尺寸来定义字体。这个长度为一个数值，前面可能带一个可选的加()或减(-)标记符。另外，该数值后可能有一个可选的单位标识符。另外，CSS2规范定义了两个单位类型：绝对单位和相对单位。绝对值指定单位，而相对单位指定一个与另一个值成比例的值。下面的列表列出了相对单位标识符：

em：元素字体的高度。它与使用该字体的元素的字体大小属性计算值相等。当它出现在字体大小属性值本身中时，会出现异常，这时它指母元素的字体大小。

ex(x-高度：CSS2规范将它描述为小写字母x的高度。

px(像素)：它与背景或屏幕的分辨率有关。根据显示器分辨率输出不同像素，由于用户的喜好不同，显示器的分辨率可能会有很大差异。

2、字体的使用

网页字体的使用一般选择宋体等比较常用的字体。不要出现生僻字体，防止用户因没安装对应字体造成显示错误。在网页中Arial就是一种字体的名称，默认的浏览器定义的标准字体是中文宋体和英文times new Roma字体。如果你没有设置任何字体，网页将以这两种标准字体显示。同时，这两种字体设计也可以在任何操作系统和浏览器里正确显示。

windows另外自带了40多种英文字体和5种中文字体。这些字体，你也可以在网页里自由使用和设置。凡是使用windows操作系统的浏览器都可以正确显示这些字体，但在其它操作系统里，如unix则不能完全正确显示。网页字体的样式一共有四种：正常体(regular)、斜体(Italic)、粗体(Bold)、粗斜体(Bold Italic)。

3、特殊字体或艺术字体的设置

如果你需要用一种特殊的字体来体现你的风格，那么特殊字体或艺术字体最好以图片的方式置入网页。需要用这种字体的地方用图片代替，以保证所有人看到的页面是同一效果。

在网页里，字体的定义语句是：显示文字其中Arial就是一种字体的名称。

如果需要用一种特殊的字体来体现风格，那么如何让大家可以真正看到设计页面呢?解决的办法是使用图片。将需要用这种字体的地方用图片代替，以保证所有人看到的页面是同一效果。

网页字体的颜色选择

字体的颜色直接会体现在网页的整体风格上，黑色，灰色，白色的搭配给人沉闷，中庸，职业，严肃等感觉，如果在适当的地方加入些许红色，则会显得充满刺激的快感，并且总能吸引众人的

目光。字体颜色的选择非常的重要，而且也非常的深奥，可以是一门专门的学科，Micfly的一篇小小文章也仅仅能给各位抛砖引玉而已。你也可以参考其他的一些资料，Micfly做网站的时候经常会参考【终极配色手册】。

网页字体的样式选择

在英文站方面，国外的很多东西不是免费的，当然也包括英文字体，所以你的网站字体不要选择那些太有个性的字体，因为你的访客可能电脑上根本就没有下载这个字体，从而导致网站所要表达的信息不能完美的诠释。那么国外浏览者PC中常有的字体有Arial, Times New Roman, and Verdana。

中文站方面呢，普通的大众绝对没有自己去下字体安装的爱好，一般的字体全是XP或其他系统自带的，选择宋体肯定是不会错的。其他楷体等等可以自己斟酌选择。注意，那个漂亮的微软雅黑字体也不是每个人都装了的。

字体样式选择建议：字体一定要选择大众化字体，种类选择上尽量不要超过三种。

网页字体的其他特性选择

除了以上说的网页字体的样式，大小，颜色之外，网页中的字体还可以设置其他各种特性：粗体，斜体，下划线，行距，段距，对齐方式等等。其实大家在排版的时候可以直接用word来做实验，看看什么样的感觉最好。

字体选择是一种感性、直观的行为。但是，无论选择什么字体，都要依据网页的总体设想和浏览者的需要。例如：粗体字强壮有力，有男性特点，适合机械、建筑业等内容;细体字高雅细致，有女性特点，更适合服装、化妆品、食品等行业的内容。在同一页面 中，字体种类少，版面雅致，有稳定感;字体种类多，则版面活跃，丰富多彩。关键是如何根据页面内容来掌握这个比例关系。

网页字体的大小选择

在互联网普及之初，英文网页占的比例比较大。由于英文字母相对汉字来说超简单，都没有笔画是否复杂一说，英文的小字体总是能显得很简洁、清晰，绝大部分英文网站的主体内容都是选择小号字体，9px, 10px, 11px, 12px,13px大小的字体在英文网页中十分常见，外国人也习惯看小号字体了。

中文网页不能照搬英文网页的设计，主要是因为两种语言的字体表现形式完全不一样，中文网页中字体大小在10px以下看不清，一般要达到12px才有不错的效果。目前来看，12个像素和14个像素大小的宋体在可阅读性和美观上结合的是最好的。比12个像素再小的话，可阅读性和美观性都没有了。比14个像素大的话，可阅读性当然是有的，但是美观性就差了一些。所以基本上所有的中文网站都是以这两个大小的文字来呈现的。

字体大小的选择建议：英文网站字体大小可以选择11px, 13px, 15px等字体大小，中文网站字体大小可以选择12px, 14px, 16px等字体大小。

1. 优化图片，获得更好的页面加载速度 学习如何通过选择正确的格式，来优化网页图片，并确保文件大小在可行的范围你是足够小的。虽然现在人们已经都在使用宽带，但仍然有人是拨号上网。此 外，虽然移动装置技术的普及，但移动装置却不一定支持像宽频一样的速度，图片文件的大小可能还是会延长网页的加载时间，有可能把用户赶走的。 这里有个选择适合的文件格式的技巧：如果图片是单色，那最好保存成PNG或者GIF格式;如果是连续性的色调(如照片)则最好保存成 JPG格式。

有很多的工具可以帮助你进一步优化你的图片，降低他们的文件大小。可以参考这个工具列表来帮助优化你的图片。尽量把图片数量减到最低，并且灵活使用图片，并且尽可能地减小文件大小。如此一来，将可以大大的减少页面的读取时间和改善网页的性能。

2. 保持干净和简单(即：简洁) 一个好的网页设计不光只是看起来好看而已，还要是用户友好型的。通常来说，一个干净、简单的网页设计最终会成为一个可用性高的网页设计，因为它在与用 户的交互中不会使其产生混淆。当页面上有太多的网站功能和组件时，将会分散网站用户的注意力而失去原本浏览网站的目的。确保每个页面元素都有其目的，然后 问自己以下问题： 是否真的需要这个设计么? 这是什么组件是做什么用，它如何协助用户浏览? 如果我突然删除这个组件，大多数人会希望它“回来”吗 ? 如何把这些元素和目标、消息和网站的宗旨互相结合? 此外，尽管它可能是一个超酷的新概念或界面设计模式，但你还是要确保对你的用户而言该设计仍然是方便和直观的。人们习惯于通用性的交互模式、网站功能、和网络接口，如果你的设计的确很独特，确保它不是太模糊和晦涩。 要有创意，但还要保持简单。

3. 导航(条/栏)是最重要的设计 一个网站最重要的部分就是整个网站的导航。没有它，无论在哪个页面中，用户都会发生卡在这个页面离不开的状况。有了这明显的实际方向，我们将讨论一些建构网站导航时重要的点。 首先，在网站的导航结构上，投入足够的时间和很多规划是非常重要的。虽然这是常识，但仍然有很多设计师想当然地设计网站导航。 摆放位置、风格、所用技术(javascript或CSS)、可用性和网页易读性，这些是你制作导航设计时需要考虑的。 在没有CSS的状况下，你的导航设计应该也是可用的，这是基于文字基础的浏览器相容性。你可以尽量去嘲笑文字基础的浏览器，但它们在很多的移动设备上还是流行的。也许更为重要的是，对屏幕用户来说(99.99%的情况下)，没有CSS的导航功能照样可用访问。 在没有客户端技术情况下(如JavaScript或Flash)，导航功能应该容易进入和使用的。用户可能因安全性或公司政策而没有开启或安装。 所以，制定一个导航系统可以放置的良好位置是必须的，例如放在一个显眼可见的地方。一个好的导航功能，只要网页载入就出现，而不需要鼠标再向下滚动。这是为什么页面要保持干净和简单的重要作用，一个复杂且非常规的设计可能会让用户困惑。 哪怕只有一瞬间，用户也必定不会纳闷：“网站导航在哪里?” 最后，对网站建立阶层结构，多层次的管理。确保它在父层与子层之间易于导航。此外，不管在哪一个网页当中，也应该能很容易到达最高层的页面(例如网站首页)。 最主要的目标就是你的网站导航，尽可能减少操作(动作)，努力而让用户到达他想要浏览的内容。

4. 明智和有条理地使用字体 虽然有成千上万的字体，但你真的能用的只是一小部分(至少要等到主要的浏览器完全支持CSS3)。 所以坚持使用网页安全字体。如果你不喜欢网页安全字体，可以考虑利用sIFR或Cufon逐步增强的网页设计。 保持字体的一致性，确认标题和段落的内容看起来有所不同。使用空白、调整行高、字体大小和字母间距属性，使用户轻松愉快地阅读和扫描内容。 也许一个网页设计师常常犯的错误就是使用不对的字体大小。因为我们想尽可能的将内容都塞在一个网页中呈现，所以我们有时设置字体大小而让用户感觉到不 舒服。如果可能的话，尽量保持字体大小12像素以上，特别是对段落内容。虽然很多没有遇到因为字体太小而造成阅读上的困难，但是想想老人家、近视眼和其他 类似视觉障碍的族群吧。

5. 理解色彩无障碍性 说完字体后，我们还需要指出使用正确颜色的重要性。例如，黑色文字在白色背景，如果使用高对比度，橙色背景上的红色文字会令你的眼睛感到紧张。 此外，使用一些对特殊形式色盲的用户友好的颜色(检查工具名为Vischeck，可以测试某些类型的色盲)。 有些色彩组合只适合运用在前景色的部分，而不适合做背景色。举个例子来说，深蓝色的文字搭配粉红色的背景与粉红色的文字搭配深蓝色的背景，都是使用两 种一样的颜色，但用在不同的部分则影响了它的可读性和阅读的舒适度。重要的是，不仅要使用良好的色彩组合，而且要把它用在页面中的合适元素上。

这根倾斜的直线跟logo中的首字母“A”的倾斜保持一致，创建了这个网站的节奏。滑动的预览图深深的抓住你的眼球，图片很大让你感觉到无拘无束。

这个为葡萄园设计的网站非常的独特和创新，设计的就像一个老式的海报。这个美丽的网站设计成功的找到了一种葡萄酒的感觉。

一种很常见的字体的巨大的字母在整个屏幕范围之内，还延伸到整个页面。使得“Rijksmuseum”看起来比现实中的大很多。

手写的字体让这个网站看起来很有个性，也让用户为这个工作室的设计产生了一个心理预期。这个网站除了欢迎语之外的所有字体处理方式都强化了轻松但有创造力，文字简短但是直达目的。

Caava Design使用无衬线字体使这个网站有着整洁干净的美感

这个小酒吧休闲室的主题是基于Chaeles Bukowski的小说，结合一些文学的元素和古老的打字机字体的标志。我喜欢它的导航条，当你的鼠标悬停在上面的时候，那些小图标转动的方式。