css3自定义字体实现毛体输出沁园春雪以及font属性

案例效果如下图：

本案例是前边两篇论述@font-face属性的延伸与巩固。这里使用的是毛体，各位可以去字体网站上自行搜索下载，也可以使用其他字体来练习。

html代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"></head><body>
<h1 >沁园春·雪</h1>
<p><span>北国风光，        </span><span>千里冰封，        </span><span>万里雪飘。        </span><span>望长城内外，      </span><span>惟余莽莽；        </span><span>大河上下，        </span><span>顿失滔滔。        </span><span>山舞银蛇，        </span><span>原驰蜡象，        </span><span>欲与天公试比高。  </span><span>须晴日，          </span><span>看红装素裹，      </span><span>分外妖娆。        </span><span>江山如此多娇，    </span><span>引无数英雄竞折腰。</span><span>惜秦皇汉武，      </span><span>略输文采；        </span><span>唐宗宋祖，        </span><span>稍逊风骚。        </span><span>一代天骄，        </span><span>成吉思汗，        </span><span>只识弯弓射大雕。  </span><span>俱往矣，          </span><span>数风流人物，      </span><span>还看今朝。        </span></p></body>
</html>

css代码：

 <style type="text/css" >@font-face {font-family: 'mao';src: url('myfonts/maoti.ttf'); }h1 {font-family: 'mao' !important;text-align:center;}p{font-family: 'mao' !important;text-align:center;font-size:20px;}p span{display:block;height:30px;line-height:30px;}</style>

ok，就这么简单就可以实现在页面输出的文字使用自己指定的毛体了，不管谁在页面上打开，也不管别人电脑上有没有安装过毛体，页面的显示效果都是毛体，效果统一，这就是使用@font-face自己指定字体的好处所在。

上边用到了font属性，顺便总结一下font属性的格式与用法。

css里面的font属性是用来控制文字字体的属性，可以单独来写，也可以使用简写格式。

简写格式：font:[font-style] [font-weight] font-size font-family，其中的[]表示可以省略。

font-style:字体是否是斜体

例如：italic与normal

font-weight:字体是否粗体，可以是数字或者单词，对应关系是bold(700)与normal(400)或者lighter或者100-900

font-size：字体大小

例如：14px

font-family:使用的字体

例如：'宋体',Arial

font-variant:normal small-caps(小型大写字母)

css3自定义字体实现毛体输出沁园春雪以及font属性相关推荐

css3自定义字体、字体图标
自定义字体@ font-face: @ font-face的是一个CSS规则,允许你输入自己的字体出现在网站上,即使在特定的字体在访问者的计算机上没有安装.能让客户端使用在线字体. <!DOCT ...
CSS学习笔记----CSS3自定义字体图标
响应式网页字体图标作者:大漠日期:2014-01-28 点击:3220 @font-face Responsive 本文由大漠根据Jason的<Responsive Webfont Icon ...
定义自定义字体需要css的什么规则,css3自定义字体需要什么规则 css3基本选择器...
CSS如何自定义文字位置? 控制字体位置可以用paddingmargintext-indent单位可以是pxem%(em是根据你设置的字体大小设定的,假如你设置字体为12px,那么2em就是24px. ...
css怎么自定义字体样式
css自定义字体样式的方法:可以利用font属性来自定义字体样式,如[font-weight:normal;].font-weight属性用于设置文本的粗细,如果要设置文本字体大小,可以使用font- ...
Qt Creator使用自定义字体
Qt Creator使用自定义字体使用自定义字体使用自定义字体为了使UI在设备上预览时使用自定义字体,必须将字体导入项目文件夹.Qt Design Studio会将它们与您的UI一起部署到设备上 ...
android 字体编程,Android编程之Calligraphy：Android 自定义字体库
Calligraphy是android 自定义字体库添加依赖 Download from Maven Central (.jar) OR Java dependencies { compile 'u ...
CSS3.0使用@font-face自定义字体
CSS3.0使用@font-face自定义字体原创2016年04月14日 19:03:09 2238 0 1 @font-face是CSS3.0里面的模块,能将自定义的字体添加到网页中. index ...
大屏展示LCD液晶字体—css3 @font-face属性自定义字体
显示效果: 实现步骤: 到 dafont 下载.ttf 格式字体,选择LCD,点download下载,得到压缩包,需解压. 通过fontsquirrel来生成.woff等格式的字体. 上传.ttf格式 ...
css自定义字体转换工具_5种最佳CSS3字体工具
css自定义字体转换工具自从将图形支持添加到浏览器以来,字体在网络上产生了最戏剧性的视觉影响. 几年前,不可能找到使用Arial,Verdana,Tahoma,Times New Roman或Geo ...

css3自定义字体实现毛体输出沁园春雪以及font属性

css3自定义字体实现毛体输出沁园春雪以及font属性相关推荐

最新文章

热门文章