网页设计怎么加粗字体

免费下载！人工智能软件！自动写文案、做图片、自动配音等等超级全的功能！

网页 设计 怎么加粗字体

像这样的一些问题，那么都是开发经验的一种阐述，如果没有进行过开发，或是长期的开发，那么多半的程序员都还是体会不到其中的内涵。接下来小编告诉你网页设计怎么加粗字体。

字体加粗

语法: font-weight: <值>

允许值: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

初始值: normal

适用于: 所有对象

向下兼容: 是

字体加粗属性用作说明字体的加粗。当其它值绝对时，bolder和lighter值将相对地成比例增长。

注意: 因为不是所有的字体都有九个有效的加粗显示，一些加粗的会在指定下组合。如果指定的加粗无效，会按以下原则选择:

500 会被 400代替，反之亦是

100-300 会被指定为下一较细的加粗，如果有的话，否则就是下一较粗的加粗

600-900 会被指定为下一较粗的加粗，如果有的话，否则就是下一较细的加粗

一些字体加粗的定义例子如下:

H1 { font-weight: 800 }

P { font-weight: normal }

2

网页字体设计设置技巧

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就是一种字体的名称。

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

3

怎样设计网页中的字体效果最好

网页字体的样式选择

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

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

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

网页字体的大小选择

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

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

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

网页字体的颜色选择

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

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

网页字体的其他特性选择

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

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

4

网页设计中文字排版设计的技巧

行长

我们随手拿起一本书或者一份报纸，数一数每行的文字，一般情况下都不会超过40个汉字。这是因为如果每行文字过长，读者会不停的转动脖子，感到疲惫的同时也会降低阅读效率;目光从行尾移至下一行首，也很容易串行，影响读者浏览文章的节奏。这点同样适用于网页上的文章阅读。由于显示器是横向的，我们更要注意划分阅读区域。文本宽度控制在450-700px为宜，此范围内参照字号大小;英文每行80-100个字母(空格算一个字母)为宜;中文每行30-40个汉字为宜。

行宽

我们可以想象一下：如果一行文字过长，视线移动距离长，很难让人注意到段落起点和终点，阅读比较困难;如果一行文字过短，眼睛要不停来回扫视，破坏阅读节奏。因此我们可以让内容区的每一行承载合适的字数，来提高易读性。传统图书排版每行最佳字符数是55—75，实际在网页上每行字符75—85更流行。中文在14号字体时，建议35—45个文字。

间距

通过设置间距，我们就可以控制文字的密度。网页设计中，如果每行间距太小，与文字过长一样，读者浏览文章时也容易串行;如果行距过宽，阅读时就会感觉文章不够连贯。间距没有固定的值，通常是根据字体大小来定义的。在word里我们常看到双倍行距、单倍行距和1.5倍行距的选项。网页上行距的单位常用em来表示，不管是中文网站还是英文网站，大家多喜欢用1.5em-1.8em的行距。以1.6em的行距为例，字号16px的字，行距就是25.6px。

关于段距，我们要考虑一下具体实际情况。比如文章篇幅较短，就不需要很宽的段距;二文章篇幅很长，特别是那些偏学术的比较枯燥的文章，就要多利用段距把握文章的节奏，给阅读者喘息和思考的机会，且使文章更有层次和可读性。如(图)所示，1.5-1.8em的行距的确是非常适于阅读的文字密度。

另外，行高/段落之间的空白=0.754。行间距正好是段落间距的75%是非常常见的。比如简书16号字体，行间距27px/段间距36px=75%。文字字号本身比较大，所以行间距也不需要严格按照1—1.5倍的比例设置，不过行间距和段间距的比例符合75%，看起来很不错，这样的视觉效果让人在阅读时保持一种节奏感，这就是在实际情况中将规范的灵活应用。

行对齐

排版中很重要的一个规范就是把应该对其的地方对齐，比如每个段落行的位置对齐。

不论哪种视觉效果，精美的、正式的、有趣的还是严肃的，一般都可以应用一种明确的对齐来达到目的。

通常情况下，建议在页面上只是用一种文本对齐，尽量避免两端对齐。

文字留白

在排版文字时，在版面需要留出空余空间，留白面积从小到大应该遵循的顺序是：字间距、行间距、段间距。此外，在排版内容区之前，需要根据页面实际情况给页面四周留出余白。

对齐

在网页设计中，元素在页面上不能随意摆放，每一项都应与页面内容存在某种联系。对齐可对齐是网页设计必不可少的部分，它可以帮助设计师做出吸引人的设计，是出色网页设计的潜在要求。

亲密性

位置的接近意味着存在关联，亲密性是指将相关项组织在一起让它们从整体看看起来和谐统一。亲密性可以从两点入手：适当留白、以视觉重点突出层次感。比如以下案例中图文搭配，这是多个元素在一起的组合排版。