增加字体和颜色样式

2019-11-11 06:31:11

字体：大中小

来源：转载

供稿：网友

梗概

用font-family属性定制页面中使用的字体body{ font-family:Verdana,Geneva,Arial,sans-serif; }用font-size属性控制字体的大小body{ font-size:14px;}

3.用color属性设置字体颜色

body{ color:silver;}

4.用text-decoration属性为文本增加更多风格

body{ text-decoration:underline;}

细解各部分

字体系列 每个font-family包含一组有共同特征的字体，共有5个字体系列：sans-serif,serif,monospace,cursive,fantasy

1.sans-serif包含Verdana,”Arial Black”,Trebuchet MS,Arial,Geneva 没有衬线，更易识别 2.serif包含Times,Times New Roman,Georgia 有衬线（新闻报纸的文字排版） 3.Monospace字体系列包括：Courier，Courier New,Andale Mono 字体包含固定宽度的字符，这些字体主要用于显示乳尖代码示例 4.Cursive字体系列：Comic Sans,Apple Chancery 看似手写的字体 5.Fantasy字体系列：LAST　ＮＩＮＪＡ，Ｉｍｐａｃｔ　有某种风格的装饰性字体

使用CSS指定字体系列

body{ font-family:Verdana,Geneva,Arial,"Courier New",sans-serif;}

每个人都有不同的字体，如何处理？ *这些字体在Windows和Mac上可能都有 Verdana，Arial Black，Trebuchet MS,Arial,Times New Roman,Georgia，Courier New ，Andale Mono，Comic Sans，Ｉｍｐａｃｔ

*这些字体最有可能出现在Mac上 Geneva,Times,Courier，Helvetica 如何为页面增加Web字体

找到一个字体：访问一些提供字体的网站　　　　　　　　　　　　　　　ＦｏｎｔＳｑｕｉｒｒｅｌ（ｈｔｔｐ：／／ｗｗｗ．ｆｏｎｔｓｑｕｉｒｒｅｌ．ｃｏｍ／）就是一个很好的网站，这里提供了很多开源免费的字体，你可以把这些字体传到你的服务器。Ｇｏｏｇｌｅ　Ｗｅｂ字体服务（ｈｔｔｐ：／／ｗｗｗ．ｇｏｏｇｌｅ．ｃｏｍ／ｗｅｂｆｏｎｔｓ）也很不错，可以让Ｇｏｏｇｌｅ为你完成管理字体和ＣＳＳ的所有具体工作，在这种情况下你只需要链接Ｇｏｏｇｌｅ服务上你想要的字体，然后在你的ＣＳＳ中使用相应的字体名就可以了。灰常简单哦！确保有所需字体的所有格式：常用格式 TrueType字体：.ttp Web开放字体格式：.woff把你的字体放在web上你可能想把你自己的字体放在网上，这样用户的浏览器就能够访问这些字体。或者也可以应用网上的很多在线字体服务，这些服务会为你托管这些文件，不论哪一种情况，你都需要这些字体的ＵＲＬ。在ＣＳＳ中增加＠ｆｏｎｔ－ｆａｃｅ属性　现在你已经得到了ＵＲＬ，所以现在就要为．ｃｓｓ文件增加＠ｆｏｎｔ－ｆａｃｅ规则　＠ｆｏｎｔ－ｆａｃｅ｛ｆｏｎｔ－ｆａｍｉｌｙ：＂Ｅｍｂｌｅｍａ　Ｏｎｅ＂；ｓｒｃ：url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal　　　　　　　　　　　　/EmblemaOne-Regular.woff"), 　 url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal　　　　　　　　　　　　/EmblemaOne-Regular.ttf");｝

＠ｆｏｎｔ－ｆａｃｅ规则会建立一个字体，将指定一个ｆｏｎｔ－ｆａｍｉｌｙ名（可以使用你喜欢的任意名字），以便以后使用。

５.在ＣＳＳ中使用ｆｏｎｔ－ｆａｍｉｌｙ名

ｈ１｛ｆｏｎｔ－ｆａｍｉｌｙ：＂Ｅｍｂｌｅｍａ　Ｏｎｅ＂，ｓａｎｓ－ｓｅｒｉｆ；｝

６．加载页面

％获取ｗｅｂ字体会花费一段时间，你的页面性能可能会受到影响％用ｆｏｎｔ－ｆａｃｅ创建多种字体时，不仅要保证能够获取这些字体的ＵＲＬ，而且每个字体要创建单独的ｆｏｎｔ－ｆａｃｅ规则

** 调整字体大小（默认字体大小为１６ｐｘ）

用像素指定字体大小ｂｏｄｙ｛ｆｏｎｔ－ｓｉｚｅ：１４ｐｘ；｝

　　２．百分数　　

ｈ１｛ｆｏｎｔ－ｓｉｚｅ：１５０％；｝

　　　３．ｅｍ（四舍五入）　　　

ｈ２｛ｆｏｎｔ－ｓｉｚｅ：１.２ｅｍ；｝

　　　４．关键字ｘｘ－ｓｍａｌｌｘ－ｓｍａｌｌｓｍａｌｌ＝１２ｐｘｍｅｄｉｕｍｌａｒｇｅｘ－ｌａｒｇｅｘｘ－ｌａｒｇｅ　　差距：２０％　 如何指定字体大小呢