教你如何用CSS来控制网页字体的显示样式

HTML对于<font>内容</font>卷标只有: <font color=colorvalue size=fontsize face=字型></font>这3种设定,而关于CSS对于<font>内容</font>的延伸规格让我们可以对字型的有更详细的设定。对于字型的设定: font-family:字型名称1,字型名称3,字型名称3等等。显示字型的优先级,若计算机中有安装该字型,便以该字型显示。如果你所设定的字型,client的计算机全部都没有安装,便会已浏览器预设的字型显示:font-size:18pt|120%|xx-small|s-small|small|medium|large|x-large|xx-large

  对于字体大小的定义严格来说有2种方式:

  1、绝对 
  如:pt;in 这些大小是固定的,不会因分辨率而改变..

  2、相对 
  如: px;em;% 这些会随着分辨率与目前字号而改变...

  font-style:normal|italic|oblique 
  斜体 
  font-weight:normal|bold|lighter|bolder|100-900 
  字体粗细 
  font-variant:normal|small-caps 
  英文小写转字体较小的大写

  关于以上这些的应用,可以用[CSS套入]的任何一种方式.. 
举个例:

以下是引用片段:
<html>  
<head>  
<title></title>  
<style>  
span {font-size:20pt;  
font-color:purple;  
font-variant:small=caps;  
}  
</style>  
</head>  
<body>  
<span>Dhtml&Asp</span>  
</body>  
</html>

  这样子显示的字体便会为20pt大小、紫色、英文小写转成较小的大写了。或者也可以这样设定:

以下是引用片段:
<html>  
<head>  
<title></title>  
</head>  
<body>  
<span style="font-size:20pt;font-color:purple;font-variant:small-caps">Dhtml&Asp</span>  
</body>  
</html>
这样子显示的字体同样也是20pt大小、紫色、英文小写转成较小的大写了。

(0)

相关推荐

  • 教你如何用CSS来控制网页字体的显示样式

    HTML对于<font>内容</font>卷标只有: <font color=colorvalue size=fontsize face=字型></font>这3种设定,而关于CSS对于<font>内容</font>的延伸规格让我们可以对字型的有更详细的设定.对于字型的设定: font-family:字型名称1,字型名称3,字型名称3等等.显示字型的优先级,若计算机中有安装该字型,便以该字型显示.如果你所设定的字型,client的计算

  • 让用户自己控制网页字体的大小的css书写方法

    现在国内绝大多数的站点都用CSS把字体大小设定为12px,像素虽然也是相对尺寸单位,但只是相对于屏幕的分辨率 ,当屏幕的分辨率一定时,如果你感到字太小,阅读有困难,在非标准浏览器中就无能为力了,所以说,如果把单位改成em,那么就可以用CTRL+鼠标滚动把字放大,或者用菜单上的查看>文字大小来改变字的大小. 如何设定 1.在body标签里将字体尺寸设为62.5%,如果在body里没有CSS设定,那么浏览器默认的大小是16px,设了62.5%,则字体尺寸=16px*62.5%=10px,这时你能用e

  • css pointer控制在firefox下显示手型的代码

    在ie下设置 css 样式 style="cursor:hand;" 可以正常显示 但是在firefox下就不行 改用 style="cursor:pointer;" 则在两个浏览器下都能正常显示 但只适用于IE6.0及以上版本以及FIREFOX,在IE5.0下不能显示成手

  • 使用脚本控制网页Table的显示隐藏(全代码)_AX

    [需求] 如果大家登录过 我傲:http://www.woall.com 新浪博客等 就会发现可以点击栏目标题,就会发现栏目可以展开和收起,非常好用!其实这个功能实现起来很简单.重点就是要找到要隐藏的Table行,对它的display属性进行控制. 强烈建议大家登录:http://www.woall.com亲身体验一下! [另]帖子里网址怎么加链接啊??? [源码]使用方法:把文件考下来,保存为htm类型的文件即可! 无标题文档 你点我啊!! AXzhz制作 [Ctrl+A 全选 注:如需引入外

  • 教你如何用Java简单爬取WebMagic

    一.Java爬虫--WebMagic 1.1 WebMagic总体架构图 1.2 WebMagic核心组件 1.2.1 Downloader 该组件负责从互联网上下载页面.WebMagic默认使用Apache HttpClient作为下载工具. 1.2.2 PageProcessor 该组件负责解析页面,根据我们的业务进行抽取信息.WebMagic使用Jsoup作为HTML解析工具,并基于其开发了解析Xpath的工具Xsoup. 1.2.3 Scheduler 该组件负责管理待抓取的URL,以及

  • JS控制网页动态生成任意行列数表格的方法

    本文实例讲述了JS控制网页动态生成任意行列数表格的方法.分享给大家供大家参考.具体分析如下: 这是一个非常简单使用的JS在线生成表格的代码效果 通过JS功能代码,直接输入行数和列数就可以自动生成你需要的表格 当然你也可以扩展JS代码实现生成文字的各种形式 复制代码 代码如下: <html> <head> <title>Js动态生成表格</title> <style type="text/css"> table{font-siz

  • jQuery插件实现控制网页元素动态居中显示

    本文实例讲述了jQuery插件实现控制网页元素动态居中显示的方法.分享给大家供大家参考.具体实现方法如下: (function($) { $.fn._center = function(self, parent, dimension) { if(!dimension.vertical && !dimension.horizontal) return; //won't do anything anyway if(parent) parent = self.parent(); else par

  • JavaScript控制网页层收起和展开效果的方法

    本文实例讲述了JavaScript控制网页层收起和展开效果的方法.分享给大家供大家参考.具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <meta http-equiv="pragma" content=&q

  • 如何用PHP websocket实现网页实时聊天

    前言 最近艰难地"挤"出了一点时间,完善了很早之前做的 websocket "请求-原样返回"服务器,用js完善了下客户端功能,把过程和思路分享给大家,顺便也普及一下 websocket 相关的知识,当然现在讨论 websocket 的文章也特别多,有些理论性的东西我也就略过了,给出参考文章供大家选择阅读. 正文开始前,先贴一张聊天室的效果图(请不要在意CSS渣的页面): websocket 简介 WebSocket 不是一门技术,而是一种全新的协议.它应用 TCP

  • 教你如何用好 Java 中的枚举

    目录 1.概览 2.自定义枚举方法 3.使用 == 比较枚举类型 4.在 switch 语句中使用枚举类型 6.EnumSet and EnumMap 6.1. EnumSet 6.2. EnumMap 7. 通过枚举实现一些设计模式 7.1 单例模式 7.2 策略模式 8. Java 8 与枚举 9. Enum 类型的 JSON 表现形式 10. 补充 1.概览 enum关键字在 java5 中引入,表示一种特殊类型的类,其总是继承java.lang.Enum类,更多内容可以自行查看其官方文档

随机推荐