扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
CSS即使设置了其他字体,也要看别的电脑里有没有,一般系统自带有宋体,黑体等字体,但是如果你电脑上有好看的字体,可以显示,在别的电脑没有你的字体,就显示不了,所以一般只会设置系统自带的字体。
创新互联专注为客户提供全方位的互联网综合服务,包含不限于网站设计、网站制作、凉城网络推广、重庆小程序开发、凉城网络营销、凉城企业策划、凉城品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;创新互联为所有大学生创业者提供凉城建站搭建服务,24小时服务热线:18980820575,官方网址:www.cdcxhl.com
设置方法:
html
head
style type="text/css"
p.ziti{font-family:"Times New Roman",Georgia,Serif}
/style
/head
body
h1CSS font-family/h1
p class="ziti"要更改的字体内容/p
/body
/html
CSS定义可以是:font-family:sans-serif
也就是CSS用 p{font-family:"Times New Roman",Georgia,Serif}
为什么我这里设置了三个,分别用","隔开呢,因为不同版本的操作系统,对字体的支持不同解释如下:
例如微软雅黑不同操作系统不同版本需要如下设置:
Windows XP及以前版本的Windows
font-family: Arial, 宋体, sans-serif;
Windows Vista和Windows 7
font-family: 'Microsoft Yahei', sans-serif;
Sorry,英文就无法设置字体了,因为中文字体都包含了英文字体。好在雅黑显示英文还凑合。
Mac及其它操作系统
font-family: sans-serif;
系统自带中文字体编码:
宋体SimSun黑体SimHei微软雅黑Microsoft YaHei微软正黑体Microsoft JhengHei新宋体NSimSun新细明体PMingLiU细明体MingLiU标楷体DFKai-SB仿宋FangSong楷体KaiTi仿宋_GB2312FangSong_GB2312楷体_GB2312KaiTi_GB2312
使用@font-face来实现特殊字体的定义,定义时需要设置src和font-family属性
范例如下(其中,华文行楷只是一个范例,你可以换成任意一个字体):
style
@font-face {
font-family: 'myfont';
src: local('华文行楷'), url('STXINGKA.ttf') format('truetype');
}
.con {
font-family: 'myfont';
font-size: 44px;
}
/style
div class="con"《HTML5布局之路》/div
divh5course/div
显示效果:
只有类名为con的div设置了特殊字体
PS:url当中的是你字体文件的路径,假如是放在font文件夹下的某个字体,而你的html文件与font文件夹同级,那么路径就应该是“font/STXINGKA.ttf”。
需要准备的材料分别有:电脑、浏览器、html编辑器。
1、首先,打开html编辑器,新建html文件,例如:index.html。
2、在index.html中的style标签中,输入css代码:body{font-family: 楷体}。
3、浏览器运行index.html页面,此时文字的样式被成功定义为楷体。
特殊字体一般不是说不能添加,而是考虑到用户电脑上预装的字体有限,所以局限在宋体和微软雅黑两种字体,css属性中有个font属性,例如{font-family:"迷你简菱心";},在装过这个字体的的电脑会有效果,但是再没有装过的电脑可能就是其它字体了,一般会解析为宋体,问题解决一般由两种解决方案。
第一:css3下载字体,代码如下
@font-face
{
font-family:
'自己命名字体名字';
src:
url('字体路径');
src:
url('FileName.eot?#iefix')
format('embedded-opentype'),
/*其它格式*/
url('FileName.woff')
format('woff'),
url('FileName.ttf')
format('truetype'),
url('FileName.svg#FontName')
format('svg');
font-style:
normal;
font-weight:
normal;
/*设置默认样式*/
}
.aa{font-family:"自己命名字体名字";}
不兼容ie8及以下浏览器
第二:切png图片
如果你想你网站上的文字看起来更加不一样,就必须要给网页中的标题、段落和其他页面元素应用不同的字体。你可以用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字体:它经常用于显示计算机代码,它每个字母都是等宽的。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流