网页设计中,font如何精确字体大小
- 格式:docx
- 大小:11.62 KB
- 文档页数:1
font在config配置中的用法在进行网页设计和开发中,字体选择和配置是一个非常重要的环节,它直接影响到网页的可读性和用户体验。
在config配置中使用Font可以让我们更灵活地控制字体的展示和样式。
在config配置文件中,可以使用Font来定义字体的属性,如字体类型、字号、字重等。
以下是一些常用的Font属性和用法:1. font-family:该属性用于定义字体的类型或字体系列。
可以通过指定多个字体名称来设置字体的优先级顺序,如果浏览器不支持第一个字体,会尝试下一个字体。
示例:font-family: "Helvetica Neue", Arial, sans-serif;2. font-size:该属性用于设置字体的大小。
可以采用相对单位(如em、rem)或绝对单位(如px、pt)进行设置。
示例:font-size: 16px;3. font-weight:该属性用于设置字体的粗细。
常用的取值有normal(默认)、bold(加粗)、lighter(更轻)和bolder(更粗)等。
示例:font-weight: bold;4. font-style:该属性用于设置字体是否倾斜。
常用的取值有normal(默认,不倾斜)和italic(倾斜)。
示例:font-style: italic;5. text-decoration:该属性用于设置文本的装饰效果,如下划线、删除线等。
示例:text-decoration: underline;6. color:该属性用于设置字体的颜色。
示例:color: #333;通过在config配置文件中使用Font属性,我们可以轻松定义网页中字体的样式和展示效果。
这些属性可以根据设计要求进行灵活调整,使得网页内容更加清晰、易读,并且与整体设计风格相匹配。
总结起来,通过Font在config配置中的用法,我们可以控制字体的类型、大小、粗细、样式和颜色等属性,进而达到更好的排版和呈现效果。
标准字体字号中文网页一般文字正文都采用宋体12号(12px)字体,因为这个字体是系统对于浏览器特别优化过的字体。
虽然12px-20px的宋体字都还能看,但是宋体12px是最漂亮的,也是最普遍应用的。
黑体一般是14号,因为一般很少用黑体做正文,主要都是标题或者是关键字。
黑体14px 是优化过的字体。
英文网页一般用11px字号,个人最喜欢的字体是tahoma与verdana这两种!特别是verdana,是最经典,最好用的字体!网页标准宽度:1、在IE6.0下,宽度为显示器分辨率减21,比如1024的宽度-21就变成1003;800宽-21=779。
但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框。
2、在Firefox下,宽度的分率辨减19。
比如1024的宽度-19就变成10053、在Opear下,宽度的分率辨减23。
比如1024的宽度-23就变成1001(注:Firefox或Opear在内容少于浏览器高度时不显示右侧滚动条。
)所以如果是1024的分辨率,你的网页不如设成1000安全一点。
如果是800的分辨率一般都设成770。
这些需要明白并且牢记,不然很可能做出来不符合浏览器要求,不过一般我们都回设定的再稍微小一点,应为有些浏览器加了插件或者其他的东西宽度会有变化所以800的分辨率一般设定760左右,1024的设定990左右。
在这个显示器百花齐放的时代,网页设计师往往需要考虑不同客户端的浏览体验。
文字大小,是用户体验中的一个重要部分。
不同的分辨率,不同的显示器尺寸,不同的DPI,乃至不同的浏览器设置,都会对最终展现的文字大小带来影响。
虽然现在很多浏览器已经可以方便地缩放页面,但用户每次光临都要重新缩放,总归麻烦,何况还有许多用户不知道如何缩放页面。
最好还是根据用户的分辨率给用户一个比较体贴的默认字号,那这个字号多大合适呢?12px?14px?15px?16px?还是压根就不应该使用px这个单位呢?问题的根源,在于屏幕上的一切字号单位(px,pt,em)都是相对单位,单凭它们并不能确定文字的实际大小。
网页设计字体大小规范网页设计中,字体大小的规范是非常重要的,它可以影响用户对网页内容的阅读体验,也会直接影响网页的可读性和可访问性。
在进行网页设计时,我们需要遵守一些字体大小的规范,以确保网页内容的清晰度和可读性。
下面是一些常见的网页设计字体大小规范。
1. 主标题(Heading)字体大小应该大于正文内容。
一般来说,主标题的字体大小可以设置为28px到36px之间,根据网页的风格和内容来定。
2. 子标题(Subheading)字体大小应该相对较小,一般可以设置为18px到24px之间。
子标题是对主标题的进一步解释和补充,字体大小要比主标题小一些,以区分层次。
3. 正文(Body)字体大小应该设置为16px到18px之间,这是最常用的正文字体大小。
这个字体大小足够清晰,同时也适合大多数用户阅读。
4. 标注和辅助文本(Caption and Auxiliary Text)字体大小应该相对较小,一般可以设置为14px到16px之间。
这些文本通常是对图片、表格或其他内容的解释或补充,字体大小要比正文小一些。
5. 链接(Link)字体大小应该和正文保持一致,一般可以设置为16px到18px之间。
链接可能是网页中最重要的交互元素之一,字体大小要保持与正文一致,以确保用户能够快速识别并点击链接。
6. 导航菜单(Navigation Menu)字体大小应该设置为18px到20px之间。
导航菜单是用户在网页中进行导航的重要工具,字体大小要稍大一些,以方便用户快速定位和点击。
7. 按钮(Button)字体大小应该设置为16px到18px之间。
按钮是网页中最常见的交互元素之一,字体大小要适中,以便用户能够清晰地看到按钮上的文本内容并点击。
除了以上的字体大小规范,还需要注意以下几点:1. 网页设计中,字体大小的一致性非常重要。
相同类型的文本应该使用相同的字体大小,以保持整体的统一感。
2. 不同层级的标题和文本应该使用不同的字体大小,以区分层次和重要性。
h6 为最小字 ;数字愈大字也愈大一、文字1. 标题文字 <h#> ........ </h#> #=1~6;h1 为最大字, 2. 字体变化 <font> ........ </font>【 1】字体大小 <font size=#> ....... </font> #=1~7【 2】指定字型 <font face=" 字体名称 "> ........... </font>【 3】文字颜色 <font color=#rrggbb> ....... </font> rr:表红色( red )色码 gg:表绿色( green )色码 bb:表蓝色( blue )色码 rrggbb也可用 6 位颜色代码数字 3. 显示小字体 <small> ......... </small>4. 显示大字体 <big> ........ </big>5. 粗体字 <b> ...... </b>6. 斜体字 <i> ....... </i>7. 打字机字体 <tt> ........ </tt>8. 底线 <u> ........ </u>9. 删除线 <strike> ....... </strike>10. 下标字 <sub> ....... </sub>11. 上标字 <sup> ....... </sup>12. 文字闪烁效果 <blink> ....... </blink>13. 换行(也称回车) <br>14. 分段 <p>15. 文字的对齐方向<p align="#"> # 号可为left :表向左对齐(预设值)center :表向中对齐right :表向右对齐.<p align="#"> 之后的文字都会以所设的对齐方式显示,直到出现另一个<p align="#"> 改变其对齐方向,遇到<hr> 或<h#>标签时会自动设回预设的向左对齐。
网页设计字体大小规范网页设计字体大小规范是指在网页设计中使用不同字体大小的规定。
字体大小在网页设计中非常重要,它决定了文字的可读性、页面的布局以及视觉效果。
下面是关于网页设计字体大小规范的一些指导原则。
1. 标题字体大小:- H1标题应该有一个相对较大的字体大小,通常在24px至30px之间。
- H2标题应该比H1标题稍微小一些,通常在20px至24px之间。
- H3标题应该比H2标题更小一些,通常在18px至20px之间。
- H4至H6标题应该比H3标题更小一些,通常在16px至18px之间。
2. 正文字体大小:- 正文的字体大小应该在14px至16px之间,以保证良好的可读性。
- 对于长段落的正文内容,可以使用稍微大一点的字体大小,如18px至20px。
3. 导航栏字体大小:- 导航栏的字体大小应该比正文字体稍大一些,通常在16px至18px之间。
4. 引用、副标题和注释字体大小:- 引用、副标题和注释的字体大小应该比正文稍小一些,通常在12px至14px之间。
5. 按钮和链接字体大小:- 按钮和链接的字体大小应该比正文稍大一些,通常在16px 至18px之间。
6. 标签和标识字体大小:- 标签和标识的字体大小应该比正文字体稍小一些,通常在12px至14px之间。
7. 特殊元素字体大小:- 对于特殊元素,如页面标题、强调文字等,可以使用较大的字体大小,但要确保其与整个页面的风格和布局相符。
总之,在网页设计中,字体大小的选择要考虑到页面的整体布局和风格,保证页面的可读性和用户体验。
字体大小的合理搭配可以提高网页的可视性和吸引力,同时也要注意不要过度使用不同的字体大小,以免造成页面混乱和视觉疲劳。
Html字体大小设置方法,在HTML中字体如何设置字体大小,文字大小布局设置篇DIVCSS5通过两种方法让大家掌握html中字体大小改变设置。
1、html font标签设字体大小2、html css设字体大小接下来通过html案例介绍字体大小设置教程。
一、html font标签设置字体大小 - TOP在css之前html中文字设置字体,通常直接对文字使用font标签设置字体大小样式。
1、html文字大小font语法结构1.<font size="2">我字体大小为2</font>解释:直接使用font标签内设置size设置字体大小,需要注意不能带单位,一般2相当于12px,3相当于14px大小以此类推。
2、html font字体大小案例html源代码1.<!DOCTYPE html>2.<html>3.<head>4.<meta charset="utf-8" />5.<title>在线演示DIVCSS5</title>6.</head>7.<body>8.<font size="2">在线演示测试<font size="4">文字</font>,9.欢迎访问DIVCSS5学习网站!</font>10.</body>11.</html>3、案例截图Html 字体大小文字大小font标签案例截图二、html css样式设置字体大小 - TOP1、css字体大小单词:Font-size2、语法结构1.div{font-size:20px}设置div内文字字体大小为20px需要注意的css使用font-size设置字体大小值需要带单位,比如px(像素)、EM(相对长度大小单位),一般使用px像素为单位(了解html单位)。
html中的font设置字体html中font标签本身就是一个设置字体属性的标签,那么它的具体属性有哪些呢?下面由店铺为大家整理了html中的font设置字体的相关知识,希望对大家有帮助!html中font设置字体总结一、font标签语法与结构<font color="#FF0000"> 颜色</font>Font color设置文本颜色为红色“#FF0000” ,你可能想了解css 字体颜色:css color<font size="6"> 文字大小</font>Font size设置文本文字大小尺寸为6 ,你可能想了解css字体大小:css font-size<font face="微软雅黑">微软雅黑字体</font>Font face设置文本字体为“微软雅黑” ,你可能想了解css字体设置: css font-family二、Font标签说明常常我们在一个网页中直接使用font标签进行对文本设置文本字体、文本文字大小、文本颜色等样式。
三、Font应用案例html代码<font color="#FF0000"> 设置文本颜色</font><br /><font size="6"> 设置文本字体大小</font><br /><font face="微软雅黑">微软雅黑字体设置了文本字体</font> 补充:css5对于font直接设置网页文本样式标签总结1)、使用font size设置文字大小2)、使用html font标签face属性设置文字字体3)、使用html font color 设置文字颜色。
网页字体大小规范在设计网页时,字体大小的规范是非常重要的。
合适的字体大小能够使得网页内容更易于阅读,提升用户体验。
以下是一些常见的网页字体大小规范:1. 正文字体大小:正文字体大小通常为 16px 到 18px 之间,这个大小能够保证文字清晰可读,并且不会显得过大或者过小。
2. 标题字体大小:网页标题通常需要通过字体大小来突出其重要性。
标题字体大小可以根据标题的级别来设置,一般来说 H1 标题大小为 24px 到 32px,而 H2 标题大小为 20px 到 24px。
较小的标题字体大小可以适当减小,但不应小于正文字体大小。
3. 链接字体大小:在网页中,链接通常需要与普通文本进行区分,以增加可点击性。
链字体大小可以设置为与正文字体大小相同或者略大一些,例如 18px 或者 20px。
4. 按钮字体大小:按钮字体大小需要足够大,以便用户能够清晰地看到并点击按钮。
按钮字体大小可以设置为 18px 到 24px 之间,具体大小可以根据按钮的尺寸和设计风格进行调整。
5. 导航字体大小:导航栏是网页中重要的导航元素,导航栏的字体大小需要适中,既能够清晰可读,又不会过大或者过小。
导航字体大小可以设置为 16px 到 20px 之间。
6. 引用字体大小:在网页中,引用通常用于强调某些重要信息或者引用他人的观点。
引用字体大小一般可以设置为正文字体大小的 1.2 到 1.5 倍。
需要注意的是,以上字体大小规范只是一般的指导,实际的字体大小还需要考虑网页的整体设计风格、目标受众等因素。
最好进行多次测试和反馈,以确定最适合的字体大小。
网页字体大小怎么样去设置网页字体大小怎么样去设置网页字体的大小都是可以自己设置的,你知道吗?下面是店铺整理的网页字体大小设置方法,希望对你有帮助。
网页字体大小设置店铺推荐方法一近期,经常有电脑好者朋友由于不小心误操作导致电脑浏览网页时出现了字体变大或变小等,导致使用不习惯。
于是网友们在各大it 论坛和百度知道,soso问问等回答平台里,求助网页字体大小设置的问题,但都不是很满意。
所以我今天就给大家详细介绍几种改变网页字体设置大小的方法。
1.其实很多朋友出现网页字体变大或变小都是错误的调整到了网页的缩放比例导致的,正常网页缩放比例是100%,在浏览网页的最右下角可以看到缩放的比例,如果是比例设置不正常,那么网页字体肯定显示不是正常大小了,如下图:2.我们也可以以IE8为例,点击页面菜单查看→选择缩放→根据适合的大小进行调整。
如下图:如上图所看到的就是正常情况下网页所显示的100%缩放网页字体显示大小,如果调节成70%字体就会变的小了不少,如下图:3.所以当您发现电脑浏览网页出现字体变大或者变小,首先查看下网页缩放比例是否是100%正常数值,我们可以使用按住Ctrl键,然后滚动鼠标,就可以把网页上的文字大小随意调整。
也就是右下角的网页放大百分比,即缩放。
按住Ctrl键然后向下滚动鼠标是缩小比例,字体会变小;按住Ctrl键然后向上滚动鼠标是方法比例,字体会变大。
4.如果网页缩放比例正常,网页字体大小依然显示不正常,我们还可以打开网页,在顶部找到“工具”选项,再选择“Internet选项,如下图:在显示面面的“常规”页标中,点击“辅助功能”。
在展开菜单中选择“不使用网页中指定的字体大小”并点击“确定”。
然后再对上一层菜单也点击“确定”。
这样在InternetExplorer菜单“查看”选项中的“文字大小”处就可以改变文字的大小了,有兴趣的朋友可以去设置一下。
如下图:5.在InternetExplorer里“查看”——〉“文字大小”——〉“中”也可以设置网页字体大校如下图:网页字体大小设置的方法其实可以采用不少方法来实现,比如我们还可以通过调整分辨率来改变字体显示的大小等,设置的方法也都比较简单,另外以上介绍的网页字体大小设置方法是以windowsxp系统为例,windows7系统设置方法也类似,这里就不介绍了。
电脑网页上的字体大小怎么设置
电脑上的网页字体太小了让人看着很不舒服,怎么设置字体大小呢?下面由小编为你整理了电脑网页上的字体大小怎么设置的相关方法,希望对你有帮助!
电脑网页字体大小设置方法
不管你是在什么浏览器上页面,如果字体变小了之后,那么你看到浏览器上面的“查看”,找到“页面缩放",然后看看比例情况的。
你可以按住CTRL键,然后可以滚动鼠标的中轴的,这样你可以来回的调节字体的大小的。
浏览器的最右下角是有一个比例的,你可以看看是不是100%的,那里有缩小和放大的,你根据需要来调节的。
找到控制面板,看看那里有一个字体的调节的,你可以根据你
的需要来调节的,当然这里不仅仅页面的调节。
猜你喜欢:
1.电脑界面的字体大小怎么修改
2.如何更改电脑界面的字体大小
3.笔记本电脑字体和浏览器字体大小怎么调大
4.电脑设置界面字体大小的方法
5.电脑浏览器怎么设置字体大小。
⽹页设计⼊门--如何使⽤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为设置单位,它表⽰⼀个字距,这样⽐较精确确定⾸⾏缩进效果。
相对长度单位说明em相对于当前对象内⽂本的字体尺⼨ px像素,最常⽤,推荐使⽤绝对长度单位说明in英⼨cm厘⽶mm毫⽶pt点font字体⼀、font-size:⼤⼩1、作⽤:font-size属性⽤于设置字号。
p {font-size:20px;}2、单位:①可以使⽤相对长度单位,也可以使⽤绝对长度单位; ②相对长度单位⽐较常⽤,推荐使⽤像素单位px,绝对长度单位使⽤较少。
3、注意:①我们的字号⼤⼩以后基本就⽤px了,其他单位很少使⽤; ②⾕歌浏览器默认的⽂字⼤⼩为16px; ③但是不同浏览器可能默认显⽰的字号⼤⼩不⼀致,我们尽量给⼀个明确值⼤⼩,不要默认⼤⼩。
⼆、font-family:字体1、作⽤:font-family属性⽤于设置哪⼀种字体。
如:p {font-family:“微软键盘”;}①⽹页中常⽤的字体有宋体、微软雅⿊、⿊体等,例如将⽹页中所有段落⽂本的字体设置为微软雅⿊;②可以同时指定多个字号,中间以逗号隔开,表⽰如果浏览器不⽀持第⼀个字体,则会尝试下⼀个,直到找到合适的字体。
如果都没有,则以我们电脑默认的字体为准。
如:p {font-family:Arial,"Microsoft Yahei","微软雅⿊","⿊体"}2、注意:①各种字体之间必须使⽤英⽂状态下的逗号隔开; ②中⽂字体需要加英⽂状态下的引号,英⽂字号⼀般不需要加引号。
当需要设置英⽂字体时,英⽂字体名必须位于中⽂字体名之前; ③如果字体名中包括空格、#、$等符号,则改字体必须加英⽂状态下的单引号或双引号,例如font-family:"Times New Roman"; ; ④尽量使⽤系统默认字体,保证在任何⽤户的浏览器中都能正确显⽰。
3、CSS Unicode字体⑴使⽤Unicode字体的原因:①在CSS中设置字体名称,直接写中⽂是可以的。
CSS样式大全字体属性:(font)大小{font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD样式{font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)行高{line-height: normal;}(正常) 单位:PX、PD、EM粗细{font-weight: bold;}(粗体) lighter;(细体) normal;(正常)变体{font-variant: small-caps;}(小型大写字母) normal;(正常)大小写{text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)修饰{text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)常用字体:(font-family)"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana背景属性:(background)色彩{background-color: #FFFFFF;}图片{background-image: url();}重复{background-repeat: no-repeat;}滚动{background-attachment: fixed;}(固定) scroll;(滚动)位置{background-position: left;}(水平) top(垂直);简写方法{background:#000 url(..) repeat fixed left top;} /*简写·这个在阅读代码中经常出现,要认真的研究*/区块属性:(Block) /*这个属性第一次认识,要多多研究*/字间距{letter-spacing: normal;} 数值/*这个属性似乎有用,多实践下*/对齐{text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中)缩进{text-indent: 数值px;}垂直对齐{vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;词间距word-spacing: normal; 数值空格white-space: pre;(保留) nowrap;(不换行)显示{display:block;}(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group;table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题) /*display 属性的了解很模糊*/方框属性:(Box)width:; height:; float:; clear:both; margin:; padding:; 顺序:上右下左边框属性:(Border)border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;border-width:; 边框宽度border-color:#;简写方法border:width style color; /*简写*/列表属性:(List-style)类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;位置list-style-position: outside;(外) inside;图像list-style-image: url(..);定位属性:(Position)Position: absolute; relative; static;visibility: inherit; visible; hidden;overflow: visible; hidden; scroll; auto;clip: rect(12px,auto,12px,auto) (裁切)css属性代码大全一CSS文字属性:color : #999999; /*文字颜色*/font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/font-style:itelic; /*文字斜体*/font-variant:small-caps; /*小字体*/letter-spacing : 1pt; /*字间距离*/line-height : 200%; /*设置行高*/font-weight:bold; /*文字粗体*/vertical-align:sub; /*下标字*/vertical-align:super; /*上标字*/text-decoration:line-through; /*加删除线*/ text-decoration: overline; /*加顶线*/text-decoration:underline; /*加下划线*/ text-decoration:none; /*删除链接下划线*/ text-transform : capitalize; /*首字大写*/ text-transform : uppercase; /*英文大写*/ text-transform : lowercase; /*英文小写*/ text-align:right; /*文字右对齐*/text-align:left; /*文字左对齐*/text-align:center; /*文字居中对齐*/text-align:justify; /*文字分散对齐*/ vertical-align属性vertical-align:top; /*垂直向上对齐*/ vertical-align:bottom; /*垂直向下对齐*/ vertical-align:middle; /*垂直居中对齐*/vertical-align:text-top; /*文字垂直向上对齐*/vertical-align:text-bottom; /*文字垂直向下对齐*/二、CSS边框空白padding-top:10px; /*上边框留空白*/padding-right:10px; /*右边框留空白*/padding-bottom:10px; /*下边框留空白*/padding-left:10px; /*左边框留空白三、CSS符号属性:list-style-type:none; /*不编号*/list-style-type:decimal; /*阿拉伯数字*/list-style-type:lower-roman; /*小写罗马数字*/list-style-type:upper-roman; /*大写罗马数字*/list-style-type:lower-alpha; /*小写英文字母*/list-style-type:upper-alpha; /*大写英文字母*/list-style-type:disc; /*实心圆形符号*/list-style-type:circle; /*空心圆形符号*/list-style-type:square; /*实心方形符号*/list-style-image:url(/dot.gif); /*图片式符号*/list-style-position: outside; /*凸排*/list-style-position:inside; /*缩进*/四、CSS背景样式:background-color:#F5E2EC; /*背景颜色*/ background:transparent; /*透视背景*/background-image : url(/image/bg.gif); /*背景图片*/ background-attachment : fixed; /*浮水印固定背景*/ background-repeat : repeat; /*重复排列-网页默认*/background-repeat : no-repeat; /*不重复排列*/ background-repeat : repeat-x; /*在x轴重复排列*/ background-repeat : repeat-y; /*在y轴重复排列*/指定背景位置background-position : 90% 90%; /*背景图片x与y轴的位置*/ background-position : top; /*向上对齐*/background-position : buttom; /*向下对齐*/background-position : left; /*向左对齐*/background-position : right; /*向右对齐*/background-position : center; /*居中对齐*/五、CSS连接属性:a /*所有超链接*/a:link /*超链接文字格式*/a:visited /*浏览过的链接文字格式*/a:active /*按下链接的格式*/a:hover /*鼠标转到链接*/鼠标光标样式:链接手指CURSOR: hand十字体cursor:crosshair箭头朝下cursor:s-resize十字箭头cursor:move箭头朝右cursor:move加一问号cursor:help箭头朝左cursor:w-resize箭头朝上cursor:n-resize箭头朝右上cursor:ne-resize箭头朝左上cursor:nw-resize文字I型cursor:text箭头斜右下cursor:se-resize箭头斜左下cursor:sw-resize漏斗cursor:wait光标图案(IE6) p {cursor:url("光标文件名.cur"),text;} 六、CSS框线一览表:border-top : 1px solid #6699cc; /*上框线*/ border-bottom : 1px solid #6699cc; /*下框线*/ border-left : 1px solid #6699cc; /*左框线*/ border-right : 1px solid #6699cc; /*右框线*/以上是建议书写方式,但也可以使用常规的方式如下: border-top-color : #369 /*设置上框线top颜色*/ border-top-width :1px /*设置上框线top宽度*/ border-top-style : solid/*设置上框线top样式*/其他框线样式solid /*实线框*/dotted /*虚线框*/double /*双线框*/groove /*立体内凸框*/ridge /*立体浮雕框*/inset /*凹框*/outset /*凸框*/七、CSS表单运用:文字方块按钮复选框选择钮多行文字方块下拉式菜单选项1选项2八、CSS边界样式:margin-top:10px; /*上边界*/margin-right:10px; /*右边界值*/margin-bottom:10px; /*下边界值*/margin-left:10px; /*左边界值*/CSS 属性:字体样式(Font Style)序号中文说明标记语法1 字体样式{font:font-style font-variant font-weight font-size font-family}2 字体类型{font-family:"字体1","字体2","字体3",...}3 字体大小{font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}4 字体风格{font-style:inherit|italic|normal|oblique}5 字体粗细{font-weight:100-900|bold|bolder|lighter|normal;}6 字体颜色{color:数值;}7 阴影颜色{text-shadow:16位色值}8 字体行高{line-height:数值|inherit|normal;}9 字间距{letter-spacing:数值|inherit|normal}10 单词间距{word-spacing:数值|inherit|normal}11 字体变形{font-variant:inherit|normal|small-cps }12 英文转换{text-transform:inherit|none|capitalize|uppercase|lowercase}13 字体变形{font-size-adjust:inherit|none}14 字体{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal|semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}文本样式(Text Style)序号中文说明标记语法1 行间距{line-height:数值|inherit|normal;}2 文本修饰{text-decoration:inherit|none|underline|overline|line-through|blink}3 段首空格{text-indent:数值|inherit}4 水平对齐{text-align:left|right|center|justify}5 垂直对齐{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub| super}6 书写方式{writing-mode:lr-tb|tb-rl}背景样式序号中文说明标记语法1 背景颜色{background-color:数值}2 背景图片{background-image: url(URL)|none}3 背景重复{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4 背景固定{background-attachment:fixed|scroll}5 背景定位{background-position:数值|top|bottom|left|right|center}6 背影样式{background:背景颜色|背景图象|背景重复|背景附件|背景位置}框架样式(Box Style)序号中文说明标记语法1 边界留白{margin:margin-top margin-right margin-bottom margin-left}2 补白{padding:padding-top padding-right padding-bottom padding-left}3 边框宽度{border-width:border-top-width border-right-widthborder-bottom-width border-left-width}宽度值:thin|medium|thick|数值4 边框颜色{border-color:数值数值数值数值}数值:分别代表top、right、bottom、left颜色值5 边框风格{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|gro ove}6 边框{border:border-width border-style color}上边框{border-top:border-top-width border-style color}右边框{border-right:border-right-width border-style color}下边框{border-bottom:border-bottom-width border-style color}左边框{border-left:border-left-width border-style color}7 宽度{width:长度|百分比| auto}8 高度{height:数值|auto}9 漂浮{float:left|right|none}10 清除{clear:none|left|right|both}分类列表序号中文说明标记语法1 控制显示{display:none|block|inline|list-item}2 控制空白{white-space:normal|pre|nowarp}3 符号列表{list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-a lpha|upper-alpha|none}4 图形列表{list-style-image:URL}5 位置列表{list-style-position:inside|outside}6 目录列表{list-style:目录样式类型|目录样式位置|url}7 鼠标形状{cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-re size|se-resize|sw-resize}。
网页设计中字体规范网页设计中字体规范字体是网页设计中最重要的细节,下面就是店铺介绍网页设计中字体规范,欢迎大家借鉴!网页设计中的字体选择以及常用字号字体:中文:宋体,微软雅黑,方正系列(无状态)字号:网页中正文/导航字号在12px-18px之间英文可以偏小一些 10px-16px再小识别性就不是特别好了标题文字字号,18px,20px,24px,28px,32px,尽可能使用双数网页banner的字体选用方法是要根据banner的主题,去挑选字体,因为字体本身也是有性格的,跟选老婆一样性格合得来那就幸福,如果合不来总吵架这一辈子可咋过```在字库中挑选字体时一件很让人恼火的事,为了方便大家使用,我把网页设计中经常用到的字体,按照性格分了类,以下推荐这些字体,是平时工作学习中总结得出,希望能给新收一些指导,如果你是高手,有自己的一套用字方法,那当然是极好的,所以真的不必太钻牛角尖中规中矩,经典通用中易宋体Win最常见的字体,小字体点阵,大字体TrueType,但是大字体并不好看,所以最好别做标题。
微软雅黑Vista之后新引入的字体,打开Cleartype之后显示效果不错,不开Cleartype发虚。
华文细黑Mac下的默认中文。
英文Helvetica:被评为设计师最爱的字体,Realist风格,简洁现代的线条,非常受到追捧。
在Mac下面被认为是最佳的网页字体,在Windows下由于Hinting的原因显示很糟糕。
Arial:Helvetica的「克隆」,和Helvetica非常像,细节上比如R和G 有小小差别。
如果字号太小,文字太多,看起来会有些累眼。
Win和Mac显示都正常Lucida Family:Lucida Grande是Mac OS UI的标准字体,属于humanist风格,稍微活泼一点。
Mac下的显示要比Win下好。
Verdana:专门为了屏显而设计的字体,humanist风格,在小字号下仍可以清楚显示,但是字体细节缺失严重,最好别做标题。
网页设计复习题第1题判断正误(1)HTML标记符的属性一般不区分大小写。
(对)(2)网站就是一个链接的页面集合.(对)(3)将网页上传到Internet时通常采用FTP方式.(对)(4)所有的HTML标记符都包括开始标记符和结束标记符。
(错)(5)用H1标记符修饰的文字通常比用H6标记符修饰的要小(错).(6)B标记符表示用粗体显示所包括的文字.(对)(7)GIF格式的图象最多可以显示256种颜色。
(对)(8)HTML表格在默认情况下有边框。
(错)(9)创建图象映射时,理论上可以指定任何形状作为热点.(对)(10)指定滚动字幕时,不允许其中嵌入图象。
(错)1.使用FONT 标记符的size 属性可以指定字体的大小。
()2.网站就是一个链接的页面集合。
( ) 3。
GIF格式的图象最多可以显示1024种颜色。
()4.制作图像映射只需要使用〈AREA〉标记符。
()5.在HTML表格中,表格的列数等于第一行中TH与TD的colspan属性的和。
()6。
在HTML表格中,在TR、TD或TH标记符中使用align 属性可以控制单元格内容的垂直对齐。
() 7。
指定滚动字幕时,不允许其中嵌入图象。
() 8.框架是一种能在同一个浏览器窗口中显示多个网页的技术。
()9。
CSS中的color属性用于设置HTML元素的背景颜色。
( ) 10。
CSS样式表项的组成格式为:selector{property1:value1, property2:value2,……}( ) 1。
T 2. T 3. F 4. F 5。
F6。
T 7. F 8。
T 9。
F 10. F11。
只有在框架结构的网页,才能将A标记符的target属性指定为_blank使得超链接在一个新的浏览器窗口中打开。
错判断正误(1). HTML标记符通常不区分大小写。(2). 网站就是一个链接的页面集合。(3). HTML表格在默认情况下有边框。(4)。
在HTML表格中,表格的行数等于TR标记符的个数。(5). 在HTML中,与表格一样,表单也能嵌套。答案:(1) T (2)T (3) F (4)T (5) F(1)所有的HTML标记符都包括开始标记符和结束标记符.(2)将网页上传到Internet时通常采用FTP方式.(3)GIF格式的图象最多可以显示256种颜色。
你好!你现在的size是html中的字体尺寸,这种不适合在页面中作设置,这样会影响整体字体大小的效果。
你是好的方法就是要用CSS 来做字体大小,这样会很精确地做到。
通常情况下,字体大小都是像素px为单位,用CSS来做设置的话,那如下例所示:
字体设置成为宋体12像素字体:.px12{font-family:宋体; font-size:12px}
那如何调用:<font class="px12">这是设置宋体12像素字体效果</font>
直接写入页面也是同样达到效果,方法为:<font style="font-family:宋体; font-size:12px"></font>
那样你字体大小就可以很好地精确起来,就不会一下子这么大这么难看了,你可以试一下。
希望我的回答能令你满意!。