CSS如何设置文字字体

html-css017

CSS如何设置文字字体,第1张

如果你想你网站上的文字看起来更加不一样，就必须要给网页中的标题、段落和其他页面元素应用不同的字体。你可以用font-family属性在CSS样式里设置字体，如： font-family:Arial但是设置的这种字体，你电脑上必须装有该字体，否则将按原字体样式显示。当然，也可以写上多种字体，当对方浏览你的网站，没有安装第一种字体时，浏览器就会在列表中继续往上搜寻，直到找到有适合的字 体为止，像这样： font-family:Arial,Helvetica,sans-serif在上例中，Web浏览器会先看看是否安装了Arial字体。如果安装了，那么就用Arial字体显示；如果没有安装，浏览器就会继续寻找Helvetica字体；如果还是没有找到，最后它就会指定一种通用的字体--sans-serif。如果字体的名称中包含多个单词时，则必须用双引号（“”）将它们括起来，如： font-family:"Times New Roman",Times,serif以下就介绍几种常用的font-family字体类型组合，每一列的最后都包含一种通用的字体。 1、Serif字体：最适用于冗长的文字信息，因为读者都会觉得这种字体使字母主笔划的结尾处会有一些细小的“足”，能够比较有效地引导人们的视线从一个字母一到到下一个字母，阅读起来感觉更加轻松。serif字体包括：Times，Times New Roman、Georgia。 2、Sans-serif字体：它看起来干净而简洁，所有经常被用在标题上。Sans-serif字体包括：Arial、Helvetica、Verdana和Formata。 3、Monospaced字体：它经常用于显示计算机代码，它每个字母都是等宽的。

先一个例子，比如说下面这段代码：<style type="text/css"a:link {text-decoration:nonecolor:blue}a:hover {text-decoration:underlinecolor:red}a:active {text-decoration:nonecolor:yellow}a:visited {text-decoration:nonecolor:green}</style其效果是：未被点击时超链接文字无下划线，显示为蓝色；当鼠标放在链接上时有下划线，链接文字显示为红色；当点击链接时，即链接被激活，链接无下划线，显示为黄色；当点击链接后，也就是链接已被访问过后，链接无下划线，显示为绿色。其中：a:link 指正常的未被访问过的链接；a:hover 指鼠标在链接上；a:active 指正在点的链接；a:visited 指已经访问过的链接。参数设置：text-decoration是文字修饰效果的意思；none参数表示超链接文字不显示下划线；underline参数表示超链接的文字有下划线；如果是overline则给超链接文字加上划线；换成line-through则是给超链接文字加上删除线；blink则使文字在闪烁。color:blue，color:red等是给链接文字加颜色。还可以添加其他参数，如：font-weight:bold给链接文字加粗；font-size:16pt设置链接文字字体大小；background:#ffd306给链接文字加背景颜色；font-style:italic链接文字倾斜；border-bottom:1px dashed #51bfe0给链接文字加虚线，其中1px是虚线的粗细度，数值越大越粗，dashed表示虚线，#51bfe0是虚线颜色，如果要给链接文字加虚线的话，就不用加下划线了。例如下面这两段代码：<style type="text/css"a:hover {text-decoration:noneborder-bottom:1px dashed red}</style其效果是当鼠标放在链接上的时候链接出现红色虚下划线。<style type="text/css"a:hover {text-decoration:underlinefont-weight:boldcolor:redbackground:bluefont-style:italic}</style其效果就是当鼠标放在链接上的时候，链接有下划线，字体加粗，链接文字为红色，背景为蓝色，文字倾斜。如果要去掉所有链接的下划线则可以用下面这段代码：

网上有很多种解决办法，有的很复杂，有的需要修改css文件。其实并不需要那么麻烦。只需要在虚拟主机.htaccess文件中加入的代码即可解决该问题：

<FilesMatch ".(eot|ttf|otf|woff)">

Header set Access-Control-Allow-Origin "http://donglu.net"

</FilesMatch>

以上代码中的网址改为你要访问生效的网址即可。