CSS：字体样式（字体系列、大小、加粗、风格、变形等）

时间 2014-12-10 14:56:32 CSDN博客

原文 http://blog.csdn.net/books1958/article/details/41806019

主题 CSS

CSS 字体属性定义文本的（如斜体）和变形（如小型大写字母）

代码整理自w3school：

http://www.w3school.com.cn

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><metahttp-equiv="Content-Type"content="text/html; charset=utf-8" /><metahttp-equiv="Content-Language"content="zh-cn" /><head><style>body{font-family:sans-serif;font-size:100%}h1{font-family:monospace;}h3{font-family:Georgia,serif;}p.italicFont{font-style:italic;}p.obliqueFont{font-style:oblique;}p.normalVariant{font-variant:normal}p.smallCaps{font-variant: small-caps}p.bold100{font-weight:100}p.bold900{font-weight:900}p#pix16{font-size:16px}p#pix20{font-size:20px}p#em0_8{font-size:0.8em}p#em1{font-size:1em}p#em2{font-size:2em}div#bg_01{background-color:#cff}div#bg_02{background-color:#fcf}</style></head><title>CSS 字体</title><h1>这是h1标题，将应用monospace字体。</h1><p>这是一个普通的段落，将应用指定于body的通用字体：sans-serif</p><h3>h5标题：Georgia字体（若电脑中无该字体，则以serif字体显示）</h3><pclass="italicFont">文本斜体显示<p><pclass="obliqueFont">文本倾斜显示<p><p>注：通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。</p><hr/><h3>字体变形</h3><pclass="normalVariant">This is a paragraph.<p><pclass="smallCaps">“小写字母转为大写字母，字体大小不变：”：This is a paragraph.<p><h3>字体加粗</h3><pclass="bold100">font-weight:100的文字。</p><pclass="bold900">font-weight:900的文字。</p><hr/><h3>字体大小，绝对值:px 相对值:em (1em 等于当前的字体尺寸)</h3><divid="bg_01"><pid="pix16">文本大小:16px</p><pid="pix20">文本大小:20px</p></div><divid="bg_02"><pid="em0_8">文本大小:0.8em</p><pid="em1">文本大小:1em</p><pid="em2">文本大小:2em</p></div></html>

效果图：

CSS：字体样式（字体系列、大小、加粗、风格、变形等）相关推荐

字体样式字体分类字体样式二
字体样式&字体分类&字体样式二字体样式 <!DOCTYPE html> <html lang="en"><head><m ...
CSS实战样式：文字两侧加居中横线
CSS实战样式:文字两侧加居中横线原文: https://www.freesion.com/article/4444809147/ 在日常的开发中,会遇到这样的需求,比如移动web开发中的登录页的底 ...
linux调节字体大小加粗,支持任意大小字体freetype2显示(linux frambuffer)版
#include #include #include #include #include "gb2312.h" #include "freetype2.h" s ...
win7设置系统字体大小，加粗，TXT字体大小加粗
设置系统字体大小 1.桌面空白处右击,点击屏幕分辨率: 2.看图操作,点击红框 3.看图操作,点击红框 4.看图操作,点击红框设置系统字体加粗 1.桌面空白处右击,点击个性化: 2.看图操作,点 ...
linux调节字体大小加粗,Linux下修改终端字体颜色和大小
方法一: 1.在~/.bash_profile文件中添加LS_COLORS export LS_COLORS='no=00:fi=00:di=01;33:ln=01;36:pi=40;33:so=01 ...
设置字体样式：字号大小，字体种类，字体粗细
font-size:字号大小 font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位,其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少.具体如 ...
html5中加粗字体,html如何用b加粗字体
html用b加粗字体的方法:首先创建一个HTML示例文件:然后在body中创建标签内容:接着用标签给一段文字加粗:最后运行该文件查看效果即可. 本文操作环境:windows7系统.HTML5版,DE ...
abap alv新增行数据_ALV DMEO 09：REUSE_ALV_GRID_DISPLAY 使用HTML 居中颜色大小加粗斜体超链接控制...
以下是纯顾问群~ 微信群:SAP干货铺,请联系本人微信 sapliumeng. QQ群 :SAP干货铺, 群号:775662808 所有群管理严格,严格禁止一切外来链接.招聘.广告等垃圾信息! 如果 ...
latex如何设置字体并加粗_如何设置微信昵称字体大小加粗变斜？？？
大家好我是二哥今天呢给大家分享一下微信昵称相关的内容那就是如何取一个花式昵称有花式英文名: 当然了也有花式中文名此处无图我们找到了一个APP,只需在文本框中输入你要转换的文字就可以实现,除 ...
html h1 不自动加粗,HTML中页面编辑打印，字体不统一打印无法加粗的解决方法
html> //窗口API var api = frameElement.api, W = api.opener; api.button( { name: '打印', focus: true, ...

CSS：字体样式（字体系列、大小、加粗、风格、变形等）

CSS：字体样式（字体系列、大小、加粗、风格、变形等）相关推荐

最新文章

热门文章