html字体样式怎么设置

html的字体样式主要通过css的font-size以及font-family来定义的，标签详解如下：

font-size

指定字体大小，常用单位有em和px

font-family

指定使用的字体

常用的中文字体有微软雅黑和宋体，英文字体有Arial

可以同时指定多个字体，使用英文的逗号分隔，浏览器会按顺序查找，找不到就找下一个，全部没找到就使用系统默认的

字体用中文表示 则需要用双引号或者单引号分隔，英文字体一般不需要用引号，但是如果 有特殊字符的（如空格，反斜杠，#，$等）也需要使用引号

CSS字体常用技巧：

现在网页字体大小普遍使用14px+

尽量使用 偶数 数字字号，因为在有些老式浏览器中使用奇数字号的字体会有bug

尽量使用 系统默认字体，保证用户在任何浏览器中都可以正常显示

CSS Unicode 字体

就是使用Unicode编码表示字体，为了考虑兼容性

请点击输入图片描述

font-weight

字体粗细（bold相等于设置该属性的值为700，normal相等于设置该属性值为400–>不用单位，建议使用数字因为解析会更快）

fon-style

normal（一般用于让斜体不倾斜，em标签有加重强调的语义 但是字体会倾斜，可以为em 标签设置 font-style 属性值为 normal 取消其倾斜的效果）

字体样式可以连写

即 所有的字体样式 使用一个语句，但是有一定的语法规则和顺序

选择器 { font : font-style font-weight font-size/line-height font-family}

字体样式连写时需要注意：一定要按顺序写，可以有省略不写的样式但是一定要按顺序，而且font-size和font-family是不可以省略的，否则会不起作用

文本外观样式

color：字体颜色

预定义的颜色如green，red等

十六进制，顺序是红绿蓝，十六进制是最常用的颜色表示方式

#ff0000 表示红色，等同于#f00（缩写，必须是两两相同的才可以进行缩写）；#00f表示蓝色；#0f0表示绿色；#fff表示白色（所有的颜色都满格），#000000即#000表示黑色（所有的颜色都没有）

RGB代码：rgb(255,255,255)表示白色

文本修饰：text-decoration：none、underlined（比较常用，用于添加下划线和取消下划线）

请点击输入图片描述

line-hight：行间距，一般情况下，行间距只需要比字体大小大7或8个像素就可以了

text-align：文本内容的水平对齐方式

text-indent：段落首行缩进，单位使用em，1em就是一个字，所以该样式值为2em 表示 段落首行缩进两个字符

英文字体

I.Amosis Technik(活泼)

II.Hattenschweiler(肃穆)

III.Patrician Sample(流畅)

IV.SF Quantzite(庄重)

V.SF Quartzite OutLine(衬托)

VI.Arial(作特殊英文字体以示区别)

中文字体

1.宋体(系统默认的字体就是宋体)

2.黑体

3.方正大标宋简体

4.方正大黑简体

5.华文行楷

6.文鼎大标宋简

7.文鼎粗圆简

8.文鼎特粗宋简

9.文鼎特粗圆简

10.文鼎特圆简

11.文鼎新艺体简

12.方正粗倩体

应用场合:

Banner:I,VI,4,7,8,9,11

Nav_button:1,2,7,10

公司英文名称:II,IV,VI

公司汉语名称:8,11,12

看看企业都用什么字体(中日英)：

淘宝中国使用字体 Tahoma,Helvetica,Arial,'宋体',sans-serif大小12px

联想中国使用字体 "宋体",Arial大小为12px

雅虎日本使用字体 "MS PGothic","Osaka",Arial,sans-serif大小12px

索尼日本字体为 sans-serif,"MS Pゴシック" 大小为12px

雅虎美国使用字体 arial,helvetica,clean,sans-serif大小13px

GE美国使用字体 Arial,Sans-Serif大小11px

IBM美国使用字体 Arial,Helvetica,sans-serif大小0.74em

可以看到，根据设计的不同，各个网站都不一样，就字体上来说，上面的知名网站都是使用常用字体，选用其中的就可以了。大小上来说，就要根据设计和用户可访问性来考虑了。

网页设计就业方向

各行各业的公司，都需要网页设计师，这其中更集中分布在以网站本身盈利的互联网公司。因此网页设计师的就业范围是非常广泛。市场对网页设计师的需求一直是有增无减，各大网站、广告公司、设计公司都在大量招聘网页设计人员。

网站首先作为一个网络名片，像个人主页、公司企业网、机构团体公益网站等等，都能够通过这样一个平台去对外展示自己的形象，全面有效的传达自己的意图与信息，所以网站首先是个对外宣传的窗口。越来越多的企业需要网站这样的一个平台，所以网站设计的专业人才也成为了各大企业争抢的香饽饽。据不完全统计，截至到2012年，中国的网站数量已经超过600万个，中国还有许多企业没有企业网站，虽然不是每个企业都会建设网站，那么有一部分的企业创建网站，也是一个非常大的需求，此外已经有网站的企业还需要对网站进行改版、完善。而中国的专业网站设计师不是很多，网页设计就业前景的就业前景非常好。特别是参加网页设计培训后成为专业技能很强的网站设计人才，将成为市场上的香馍馍。所以说，网站设计的市场规模是非常巨大的，网站设计师就成为非常具有发展潜力的新生劳动力量，社会需求量巨大的职业岗位。

网页设计需要具备的专业技能：

网页设计师的工作目标是通过使用更合理的颜色、字体、图片、样式进行页面设计美化，在功能限定的情况下，尽可能给予用户完美的视觉体验。高级的网页设计甚至会考虑到通过声光、交互等来实现更好的试听感受。

1，了解网页的程序实现，作为网页设计师，当然不必跟程序员一样会书写脚本代码，但是必须要了解网页的程序实现方式，因为现在互联网90%以上的网站都是动态网页，都是需要动态程序支持的，所以在做网页设计的时候需要考虑页面动态程序的实现

2，DIV+CSS，这是一种网页前台排版布局的技术，利用这种技术可以更好的使搜索引擎爬行网页，加速用户打开页面的'速度

3，.PHOTOSHOP，这是平面设计人员常用的工具，网页设计其实也是平面设计的一种，但是因为网页设计又要必须符合网页制作的一些规范，所以又有别于平面设计了

4，DREAMWEAVER，这是一款专业的网页制作工具，用PHOTOSHOP设计出网页平面，那只是一张平面图，而在互联网上浏览的一张张网页都是使用html网页格式语言进行格式化排版布局的，所以专业的网页设计人员是要掌握网页制作的知识的

5，FLASH，我们经常在网页上看到一些比较炫目的动画效果，这些效果就是通过FLASH这个软件实现，作为网页设计师，不一定要能做出很酷很炫的效果，但是掌握这些动画的基本原理，会一些小动画的制作也是必要的。

网页设计就业前景分析：

目前的网站设计师新手的薪资一般是在3000--4000元左右，随着专业技能和工作经验的积累，薪资也会随之增长，一个有经验的网站设计师，薪资可以达到5000--7000元，而如果有能力胜任更高的职位，比如说首席网站设计师，平均月薪是不会低于8000元以下的。而且在积累了丰富的经验之后，还会有更高的发展方向，可以往程序开发或是架构设计师的方向发展，让自己进入更高的职位，拥有更客观的收入。

关于外观的禁忌

1、不要先决定网页的外观，然后强迫自己甚至是强迫别人去适应它。应该从网站的浏览者、网站要传达的信息以及网站的发展目标考虑，设计出一个最适合的网页架构。

2、不要每页都采用不同的背景图片，以免每次转页都要花时间去下载。采用相同的背景色及近似的按钮都能增加网页一致性，树立统一的风格。这也是最基本的网站VI设计(视觉识别系统)。

3、不要把图片的白色部分当作是透明的颜色，要知道别人的 *** 作系统是并不一定会将底色设为白色的。解决的方法是把网页的底色设为白色。而最好的方法是用图片编辑工具为图片设置好透明底色。

4、底色或背景须与文字颜色形成明显对比，方便阅读。若你的网页里有较多文字，不妨在这方面下多点功夫，力求让浏览者能舒适阅读你的文章。

5、每页的排版不要太疏或用太大的字，尽量避免看网页的时候要作很大的卷动。

6、太长的一页要使用内部链接，聪明的网页设计者不会让浏览者在看网页时太多卷动。常见的内部链接例子如 FAQ、或名词解释。

7、在17寸显示器尚未普及的时候，不要以 800x600 以上的像素设计网页。因为这常常会导致设计上的判断失误。因此，无论你有再大的显示器，能上再大的分辨率，将显示器设置成 800x600的显示模式是适当的。 -

8、不要于每页插入太多的广告牌。相信你也不会喜欢贴满广告的网页。什么广告交换、点钱Banner、d出窗口，还有时下最流行却又最讨厌的浮动广告，还是少放为妙。至少,当我看到的时候，是会第一时间按右上角的“X”的。

关于 *** 守的禁忌

1、不要抄袭别人的创作。网络上的所有资料都是公开的，但都有版权的，若想引用别人的作品，不妨先征得同意，一般作者都只要你注明出处，对于电脑方面的东西，大多数朋友都是热情而慷慨的。更不要下载了别人的网站后，当作是自己的放在网上，这样做的结果是使所有人都知道你是个剽窃者。

2、引用 Newsgroup、BBS、或其他非电子传媒的文章，切记要注明原作者名称及文章事源，若引用别有的网页更要通知网主。尊重版权，避免官司，利人利已。

3、不要利用网页散布谣言、中伤他人，网络虽然难管理，但本着道德良心，都应洁身自爱。维持良好网络环境，要靠大家努力，从我做起。

4、不要将别人的网页变成你的框架中的一个窗口，这样不仅为浏览者带来不便，令人的网页更丑陋，而且也侵犯了别人的版权，解决方法是采用链接中的 target 参数，如 target="_top" ，或是target="_blank" 从新窗口打开网页等。若重视访问者的感受请从每一细节做起。

5、不要将别人正在使用的搜索引擎、表单及计数器等放到自己的网页中，这样做会扰乱其正常运作、增加该服务器的负荷，除非该主人表示可以连到他的 cgi-bin 或 JavaClass。

通常内容应用的字体,font-family:宋体,微软雅黑,arial,verdana,arial,serif。通常标题应用的字体,font-family:font-family:宋体,微软雅黑,arial,只是字号的大小不一样。通常的字体大小,font-size:12px或14px。让网页显示微软雅黑效果通常这样写css代码font-family:微软雅黑,宋体。

font-family:宋体,微软雅黑,arial,verdana,arial,serif

font-family:

微软雅黑,

'microsoft

yahei',

'hiragino

sans

gb',

tahoma,

arial,

宋体

font-family:

"helvetica

neue",helvetica,"hiragino

sans

gb","microsoft

yahei",arial,sans-serif

font-family:

"segoe

ui",

helvetica,

arial,

sans-serif

font-family:

arial,"hiragino

sans

gb",

"microsoft

yahei",helvetica,tahoma,sans-serif

sans-serif

helvetica:

被评为设计师最爱的字体，realist风格，简洁现代的线条，非常受到追捧。在mac下面被认为是最佳的网页字体，在windows下由于hinting的原因显示很糟糕。

arial:

helvetica的「克隆」，和helvetica非常像，细节上比如r和g有小小差别。如果字号太小，文字太多，看起来会有些累眼。win和mac显示都正常

lucida

family:

lucida

grande是mac

os

ui的标准字体，属于humanist风格，稍微活泼一点。mac下的显示要比win下好。

verdana:

专门为了屏显而设计的字体，humanist风格，在小字号下仍可以清楚显示，但是字体细节缺失严重，最好别做标题。

tahoma:

也是humanist风格，字体和verdana有点像，但是略窄一些，counter略小，曾经是windows的标准字体，mac

10.5之后默认也有安装。

trebuchet

ms:

为微软设计的一个humanist风格字体，个人觉得个性太过突出，用得不好会不搭。

serif

georgia:

基本上适合正文屏显的衬线字体，非georgia莫属了。笔画粗重，衬线明线，轮廓较大，小字体显示也很清晰，同时细节还算ok。

times:

times是为了报纸而设计的，特点是可以在有限的空间塞进去更多的文字，笔画较弱，小字号正文屏显看起来累眼。曾经engadget改版的时候用了times作为正文，被骂得很惨之后换成了georgia。

中文不熟，抛砖引玉：

中易宋体：win最常见的字体，小字体点阵，大字体truetype，但是大字体并不好看，所以最好别做标题。

微软雅黑：vista之后新引入的字体，打开cleartype之后显示效果不错，不开cleartype发虚。

华文细黑：mac下的默认中文。

装电脑时系统自带的字体都可以用，常用的微软雅黑，宋体，黑体，arial。

---