下载文档原格式
⽹页字体该如何设置？我们在⽹页制作过程中肯定会想⼀个问题，那就是⽹页⾃⼰设置的问题，到底该设置什么字体？⽹页字体多⼤合适？下⾯就给出⽹页⾃⼰设置的⼀些相关注意事项。
我们在⽹页制作过程中肯定会想⼀个问题，那就是⽹页⾃⼰设置的问题，到底该设置什么字体？⽹页字体多⼤合适？下⾯就给出⽹页⾃⼰设置的⼀些相关注意事项。
·最好是使⽤⼤多数⼈的机器上可能有的常见的truetype字体。
Arial、Times Roman、Courier、Verdana和Century Gothic是常见的字体，中⽂⾥⾯Windows⾃带宋体、⿊体及楷体。
如果你使⽤不常见的字体，不要忘记为没有此字体的浏览器指定替代的字体。
通过css设置font-family来制定字体集，浏览器可以顺序查找使⽤你制定的⼀系列字体，让你的页⾯看起来还不错。
·装饰性字体组好只⽤于标题。
然后⽤css的font-family指定缺省字体。
·不要过分地使⽤字体，在同⼀页⾯中不要使⽤太多不同的字体。
通常使⽤两种字体就⾜够了：⼀种⽤于标题，⼀种由于⽂本。
某些字体组合常常⽆法⼯作。
例如，不要再同⼀页⾯中使⽤script和斜体字体，不要在同⼀页⾯中使⽤⼀种以上的装饰性字体。
·尝试使⽤相同字型的不同浓淡度使页⾯更有趣。
如果你的页⾯相当乏味，没有图像，那么尝试设置促体的浓淡度（通过css的font-weight特性），这会使页⾯更⽣动。
使⽤不⽤的浓淡度不仅可以使页⾯更吸引⼈，它还是组织信息的最有效的⽅法之⼀。
·不要在同⼀页⾯中放两种sans serif字体，除⾮你确实知道在做什么。
如果你要在同⼀页⾯中使⽤两种字体，它们应该来⾃两种不同的字型类别。
·不同的操作系统及浏览器中pt字会不⼀样⼤。
pt（磅）最早是⽤于印刷的字号，在windows和mac os⾥⾯，相同的pt值会对应不同的px（像素）值。
唯⼀可靠的单位，就是px。
使用CSS实现自定义字体样式字体在网页设计中扮演着重要的角色，能够直接影响到网页的美观度和阅读体验。
除了常用的系统字体外，我们也可以通过CSS来实现自定义字体样式，以满足不同设计需求。
本文将介绍如何使用CSS实现自定义字体样式，并提供一些实用的技巧。
一、引入自定义字体文件首先，我们需要准备自定义字体文件，通常为.ttf或.otf格式。
在CSS中，我们可以通过@font-face规则来引入这些字体文件，并为其定义一个名字。
具体的代码如下所示：```@font-face {font-family: 'customfont'; /* 自定义字体的名字 */src: url('customfont.ttf') format('truetype'); /* 字体文件的路径和格式*/}```在上面的代码中，我们通过font-family属性为自定义字体命名为'customfont'，同时指定了字体文件的路径和格式。
二、使用自定义字体样式一旦我们引入了自定义字体文件，就可以在网页中使用自定义字体样式了。
以下是如何使用自定义字体的代码示例：```body {font-family: 'customfont', sans-serif; /* 使用自定义字体 */}h1 {font-family: 'customfont', sans-serif; /* 使用自定义字体 */font-size: 24px;font-weight: bold;}p {font-family: Arial, sans-serif; /* 使用默认字体 */font-size: 16px;}```在上述代码中，我们通过font-family属性将自定义字体'customfont'应用到了body、h1元素上。
使用逗号和sans-serif作为后备字体，当自定义字体无法正常加载时，将会使用默认的sans-serif字体。
css中引入字体文件的方式
在CSS中引入字体文件有几种常见的方式。
首先是使用@font-face规则，在CSS文件中定义自定义字体，然后将其应用于网页中的元素。
这种方法允许开发者使用他们自己的字体，而不仅仅依赖于用户计算机上已安装的字体。
另一种方式是使用链接外部字体文件。
开发者可以通过在CSS 文件中使用@import规则或者在HTML文件中使用<link>标签来链接外部字体文件，这样就可以在网页中使用这些字体。
此外，还可以使用font-family属性来引用Web字体。
Web字体是通过网络引入的字体，可以通过在CSS文件中指定字体的URL 来引入。
最后，还可以使用字体提供商的服务，如Google Fonts或Adobe Fonts等，这些服务提供了大量免费的Web字体供开发者使用，开发者只需在网页中引入提供的链接即可使用这些字体。
总的来说，CSS中引入字体文件的方式有多种选择，开发者可以根据自己的需求和偏好来选择合适的方式来引入字体文件。
详解CSS定义字体、颜⾊、背景等属性•字体属性•字体font-family:"字体1","字体2",... 例：font-family：“宋体”;•字号font-size:⼤⼩的取值例：font-size:16px; 注意：xx-small:绝对字体尺⼨，最⼩。
x-small:绝对字体尺⼨，较⼩。
medium:绝对字体尺⼨，正常默认值。
对应还有large、x-large、xx-large等。
larger:相对字体尺⼨，相对于⽗对象中字体尺⼨进⾏相对增⼤。
smaller:相对字体尺⼨，相对于⽗对象中字体尺⼨进⾏相对减⼩。
length:可采⽤百分⽐或长度值，不可为负值，其百分⽐取值是基于⽗对象中字体的尺⼨。
•字体风格font-style:样式的取值例：font-style:normal .normal是默认的正常字体；italic以斜体显⽰⽂字；oblique属于中间状态，以偏斜体显⽰。
•加粗字体font-weight:字体粗细值例：font-weight:normal. 其中normal表⽰正常粗细；bold表⽰粗体；bolder表⽰特粗体；lighter表⽰特细体；number不是真正的取值，其范围是100~900，⼀般情况下都是整百的数字，如200、300等。
•⼩写字母转化为⼤写font-variant:取值例：font-variant:small-caps;能将⼩写的英⽂字母转化为⼤写字母且字体较⼩。
另⼀个normal,表⽰正常显⽰。
•CSS中可采⽤复合样式，来简化代码，如：.h{font-family:"宋体"; font-weight:bold; font-style:italic;}•颜⾊和背景属性•颜⾊属性color:颜⾊取值例：color:red。
color可以⽤关键字或者⼀个⼗六进制的RGB值。
color:#ff0000 表⽰红⾊ color:#ffff00 表⽰黄⾊ color:#000099 表⽰蓝⾊关键字就是颜⾊的英⽂名称，如red,green,blue,分别表⽰红、绿、蓝。
css改变字体大小的方法CSS是一种用于网页设计的样式表语言，它可以控制网页的外观和布局。
其中，改变字体大小是CSS中最常用的样式之一。
在本文中，我们将介绍如何使用CSS改变字体大小。
一、使用font-size属性CSS中的font-size属性用于设置字体大小。
它可以接受不同的单位，如像素（px）、百分比（%）、em等。
下面是一个例子：```p {font-size: 16px;}```这个例子将所有段落的字体大小设置为16像素。
如果你想将字体大小设置为百分比，可以这样写：```p {font-size: 120%;}```这个例子将所有段落的字体大小设置为父元素字体大小的120%。
如果你想将字体大小设置为em单位，可以这样写：```p {font-size: 1.2em;}```这个例子将所有段落的字体大小设置为父元素字体大小的1.2倍。
二、使用媒体查询媒体查询是CSS中的一种技术，它可以根据设备的屏幕大小、分辨率等特性来应用不同的样式。
使用媒体查询可以让网页在不同的设备上呈现出最佳的效果。
下面是一个例子：```@media screen and (max-width: 768px) {p {font-size: 14px;}}```这个例子将在屏幕宽度小于等于768像素时，将所有段落的字体大小设置为14像素。
这样可以让网页在小屏幕设备上更加易读。
三、使用rem单位rem是CSS中的一种相对单位，它是相对于根元素（即html元素）的字体大小来计算的。
使用rem单位可以让网页在不同的设备上呈现出相同的字体大小。
下面是一个例子：```html {font-size: 16px;}p {font-size: 1rem;}```这个例子将所有段落的字体大小设置为根元素字体大小的1倍。
如果根元素字体大小为16像素，那么所有段落的字体大小也将为16像素。
如果根元素字体大小为20像素，那么所有段落的字体大小也将为20像素。
css设置各种中⽂字体如雅⿊、⿊体、宋体、楷体等等复制代码代码如下:.selector{ font-family:"Microsoft YaHei",微软雅⿊,"MicrosoftJhengHei",华⽂细⿊,STHeiti,MingLiu }说明：加上中⽂名“微软雅⿊”是为了兼容opera。
MicrosoftJhengHei为微软正⿊体，STHeiti为华⽂⿊体，MingLiu记得11px下的中⽂有着不凡的效果。
在css中推荐使⽤中⽂字体的英⽂表⽰法，以下附常见中⽂字体的英⽂名：Mac OS的⼀些：华⽂细⿊：STHeiti Light [STXihei]华⽂⿊体：STHeiti华⽂楷体：STKaiti华⽂宋体：STSong华⽂仿宋：STFangsong儷⿊ Pro：LiHei Pro Medium儷宋 Pro：LiSong Pro Light標楷體：BiauKai蘋果儷中⿊：Apple LiGothic Medium蘋果儷細宋：Apple LiSung LightWindows的⼀些：新細明體：PMingLiU細明體：MingLiU標楷體：DFKai-SB⿊体：SimHei宋体：SimSun新宋体：NSimSun仿宋：FangSong楷体：KaiTi仿宋_GB2312：FangSong_GB2312楷体_GB2312：KaiTi_GB2312微軟正⿊體：Microsoft JhengHei微软雅⿊体：Microsoft YaHei装Office会⽣出来的⼀些：⾪书：LiSu幼圆：YouYuan华⽂细⿊：STXihei华⽂楷体：STKaiti华⽂宋体：STSong华⽂中宋：STZhongsong华⽂仿宋：STFangsong⽅正舒体：FZShuTi⽅正姚体：FZYaoti华⽂彩云：STCaiyun华⽂琥珀：STHupo华⽂⾪书：STLiti华⽂⾏楷：STXingkai华⽂新魏：STXinwei注：如果字体的名称是⼀个单词的，不需要加引号，否则在ie6，7⾥⾯会失效，并且后⾯的样式也会不⽣效！。
CSS中的字体⼤⼩设置属性总结在Web中使⽤什么单位来定义页⾯的字体⼤⼩，⾄今天为⽌都还在激烈的争论着，有⼈说PX做为单位好，有⼈说EMS优点多，还有⼈在说百分⽐⽅便，以⾄于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK⼤局。
不幸的是，仍然有不同的利弊，使各种技术都不太理想，但⼜⽆法不去⽤。
真是进也难，退也难呀。
最近在学习em的相关知识的时候，⽆意之间让我拾得⼀宝，就是使⽤rem来设置Web页⾯的字体⼤⼩。
让我⼀下⼦就来劲了，⼀⼝⽓看完并测试了⼀回，还真是爽歪歪的呀。
师傅说好东西不能吃独⾷，于我就在这⾥给⼤家吹吹这个从没见过的REM。
在详细介绍rem之前，我们先⼀起来回顾⼀下我们常⽤的两种记量单位，也是备受争论的两个：1.PX为单位2.EM为单位PX为单位在Web页⾯初期制作中，我们都是使⽤“px”来设置我们的⽂本，因为他⽐较稳定和精确。
但是这种⽅法存在⼀个问题，当⽤户在浏览器中浏览我们制作的Web页⾯时，他改变了浏览器的字体⼤⼩，这时会使⽤我们的Web页⾯布局被打破。
这样对于那些关⼼⾃⼰⽹站可⽤性的⽤户来说，就是⼀个⼤问题了。
因此，这时就提出了使⽤“em”来定义Web页⾯的字体。
em为单位这种技术需要⼀个参考点，⼀般都是以\<body>的“font-size”为基准。
⽐如说我们使⽤“1em”等于“10px”来改变默认值“1em=16px”，这样⼀来，我们设置字体⼤⼩相当于“14px”时，只需要将其值设置为“1.4em”。
CSS Code复制内容到剪贴板1. body {2. font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/3. }4. h1 {5. font-size: 2.4em; /*2.4em × 10 = 24px */6. }7. p {8. font-size: 1.4em; /*1.4em × 10 = 14px */9. }10. li {11. font-size: 1.4em; /*1.4 × ? = 14px ? */12. }为什么“li”的“1.4em”是不是“14px”将是⼀个问号呢？如果你了解过“em”后，你会觉得这个问题是多问的。
⽹页设计⼊门--如何使⽤css设置字体和⽂本样式⼀、定义字体类型font-family:Arial,Helvetica,serif,sans-serif,monospace;ps.字体与字体之间⽤逗号隔开，句尾⽤分号例如：<html><head><title>my first text html</title><style type="text/css">.p1{font-family:serif;}.p2{font-family:sans-serif;}.p3{font-family:monospace;}</style></head><body>welcome to my first text html!<p class="p1">我是serif字体!</p><p class="p2">我是sans-serif字体!</p><p class="p3">我是monospace字体!</p></body></html>显⽰结果如下：⼆、定义字体⼤⼩font-size:xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|lengthps:1、xx-small（最⼩）、x-small（较⼩）、small（⼩）、medium（正常）、large（⼤）、x-large（较⼤）、xx-large（最⼤）、larger（增⼤）、smaller（减⼩）、length（可以是百分数、或者浮点数和单位标识符组成的长度值，但不能为负值。
其百分⽐的取值是基于⽗对象中字体的尺⼨来计算的，与em单位计算⽅法相同）;2、还可以⽤px（像素）、in（英⼨）、em（基于⽗辈字体⼤⼩为参考设置字体⼤⼩）、cm（厘⽶）、pt（点）、pc（⽪卡）来定义字体⼤⼩;3、浏览器默认字体⼤⼩为16px，所以1.2em=19.2px，0.875em=14px，0.625em=10px；4、对于⽹页宽度固定或者栏⽬宽度固定的布局，使⽤像素是正确的选择；对于⽹页宽度不固定或者栏⽬宽度也不固定的页⾯，使⽤百分⽐或em是正确的选择，这样可以⽅便客户端浏览器调整字体⼤⼩；例如：<html><head><title>my first text html</title><style type="text/css">div{font-size:20px;}.p1{font-size:0.6in;}.p2{font-size:0.8em;}.p3{font-size:2cm;}.p4{font-size:16pt;}.p5{font-size:2pc;}</style></head><body>我的字号为16px!<div>我的字号为20px!<p class="p1">我的字号为0.6in!</p><p class="p2">我的字号为0.8em!</p><p class="p3">我的字号为2cm!</p><p class="p4">我的字号为16pt!</p><p class="p5">我的字号为2pc!</p></div></body></html>显⽰结果如下：三、定义字体颜⾊如下为定义字体颜⾊的四种⽅法：color:red; /*使⽤颜⾊名*/color:#693333; /*使⽤⼗六进制*/color:rgb(120,120,120); /*使⽤rgb*/color:rgb(0%,100%,50%);四、定义字体粗细font-weight:normal|bold|bolder|lighter|100|200|300|400（相当于normal）|500|600|700（相当于bold）|800|900 PS:bolder和lighter是相对于normal字体粗细进⾏加粗和减细操作五、定义斜体字体font-style:normal|italic（斜体）|oblique（倾斜的字体）PS:italic和oblique这两个取值只能在英⽂等西⽅⽂字中有效例如：<html><head><title>my first text html</title><style type="text/css">.p1{font-style:normal;}.p2{font-style:italic;}.p3{font-style:oblique;}</style></head><body><p class="p1">我的字体为normal!</p><p class="p2">我的字体为italic!</p><p class="p3">我的字体为oblique!</p></body></html>显⽰结果如下：六、定义下划线、删除线和顶划线text-decoration:none|underline|overline|line-through|blink（闪烁效果）PS:不同的效果可以同时⽤，只需效果之间加空格即可例如：<html><head><title>my first text html</title><style type="text/css">.p1{text-decoration:underline;}.p2{text-decoration:underline overline;}.p3{text-decoration:underline overline blink;}</style></head><body><p class="p1">我的字体使⽤了underline效果!</p><p class="p2">我的字体使⽤了underline和overline效果!</p><p class="p3">我的字体使⽤了underline、overline和blink效果!</p></body></html>显⽰效果如下：七、定义字体⼤⼩写定义字体⼤⼩写有两种⽅法：font-variant:normal|small-caps（⼩型的⼤写字母字体）;text-transform:capitalize（⾸字母⼤写）|uppercase（⼤写）|lowercase（⼩写）;例如：<html><head><title>my first text html</title><style type="text/css">.p1{font-variant:normal;}.p2{font-variant:small-caps;}.p3{text-transform:capitalize;}.p4{text-transform:uppercase;}.p5{text-transform:lowercase;}</style></head><body><p class="p1">normal!</p><p class="p2">small-caps!</p><p class="p3">capitalize!</p><p class="p4">uppercase!</p><p class="p5">LOWERCASE!</p></body></html>显⽰效果如下：⼋、定义⽂本对齐text-align:left|right|center|justify（两端对齐）九、定义垂直对齐vertical-align:auto|baseline|sub|super|top|text-top|middle|bottom|text-bottom|length PS:auto：根据layout-flow属性的值对齐对象内容；baseline：将⽀持valign特性的对象内容与基线对齐；sub：垂直对齐⽂本的下标；super：垂直对齐⽂本的上标；top：将⽀持vlign特性的对象的内容与对象顶端对齐；text-top：将⽀持vlign特性的对象的⽂本与对象顶端对齐；middle：将⽀持vlign特性的对象的内容与对象中部对齐；bottom：将⽀持vlign特性的对象的内容与对象底端对齐；text-bottom：将⽀持vlign特性的对象的⽂本与对象底端对齐；length：由浮点数字和单位标识符组成的长度值或百分数，可为负数，定义由基线算起的偏移量，基线对于数值来说为0，对于百分数来说就是0%例如：<html><head><title>my first text html</title><style type="text/css">.span1{vertical-align:auto;}.span2{vertical-align:baseline;}.span3{vertical-align:sub;}.span4{vertical-align:super;}.span5{vertical-align:top;}.span6{vertical-align:text-top;}.span7{vertical-align:middle;}.span8{vertical-align:bottom;}.span9{vertical-align:text-bottom;}.span10{vertical-align:2;}</style></head><body><p><span class="span1">根据layout-flow属性的值对齐对象内容</span><span class="span1">auto</span></br><span class="span1">将⽀持valign特性的对象内容与基线对齐</span><span class="span2">baseline</span></br><span class="span1">垂直对齐⽂本的下标</span><span class="span3">sub</span></br><span class="span1">垂直对齐⽂本的上标</span><span class="span4">super</span></br><span class="span1">将⽀持vlign特性的对象的内容与对象顶端对齐</span><span class="span5">top</span></br><span class="span1">将⽀持vlign特性的对象的⽂本与对象顶端对齐</span><span class="span6">text-top</span></br><span class="span1">将⽀持vlign特性的对象的内容与对象中部对齐</span><span class="span7">middle</span></br><span class="span1">将⽀持vlign特性的对象的内容与对象底端对齐</span><span class="span8">bottom</span></br><span class="span1">将⽀持vlign特性的对象的⽂本与对象底端对齐</span><span class="span9">text-bottom</span></br><span class="span1">由浮点数字和单位标识符组成的长度值或百分数，可为负数，定义由基线算起的偏移量，基线对于数值来说为0，对于百分数来说就是0%</span><span class="span10">length=2</span></br></p></body></html>显⽰效果如下：⼗、定义字间距letter-spacing:1em;（字母与字母或者汉字与汉字之间的间距）word-spacing:1em;（定义单词与单词之间的间距）⼗⼀、定义⾏间距line-height:normal（默认值，⼀般为1.2em）|length（表⽰百分⽐数字，或者由浮点数字和单位标识符组成的长度值，允许为负值）;例如：p{font-size:12pt;line-height:12pt;}⼗⼆、定义缩进text-indent:length（表⽰百分⽐数字，或者由浮点数字和单位标识符组成的长度值，允许为负值）;PS:建议设置缩进单位时，以em为设置单位，它表⽰⼀个字距，这样⽐较精确确定⾸⾏缩进效果。
CSS⽹页中导⼊特殊字体@font-face属性详解@font-face是CSS3中的⼀个模块，他主要是把⾃⼰定义的Web字体嵌⼊到你的⽹页中。
语法规则⾸先我们⼀起来看看@font-face的语法规则：@font-face {font-family: <YourWebFontName>;src: <source> [<format>][,<source> [<format>]]*;[font-weight: <weight>];[font-style: <style>];}font-family: <YourWebFontName>：⾃定义字库名称（⼀般设置为所引⼊的字库名），后续样式规则中则通过该名称来引⽤该字库。
src：设置字体的加载路径和格式，通过逗号分隔多个加载路径和格式srouce ：字体的加载路径，可以是绝对或相对URL。
format ：字体的格式，主要⽤于浏览器识别，⼀般有以下⼏种——truetype,opentype,truetype-aat,embedded-opentype,avg等。
font-weight 和 font-style 和之前使⽤的是⼀致的。
src属性后还有⼀个 local(font name) 字段，表⽰从⽤户系统中加载字体，失败后才加载webfont。
src: local(font name), url("font_name.ttf")兼容浏览器字体格式对于@font-face⽽⾔，兼容性问题就是各浏览器所能识别的字体格式不尽相同。
TrueType格式(.ttf)Windows和Mac上常见的字体格式，是⼀种原始格式，因此它并没有为⽹页进⾏优化处理。
浏览器⽀持：IE9+,FireFox3.5+,Chrome4.0+,Safari3+,Opera10+,IOS Mobile Safari4.2+OpenType格式(.otf) 以TrueType为基础，也是⼀种原始格式，但提供更多的功能。
