金沙棋牌官方平台

当前位置:金沙棋牌 > 金沙棋牌官方平台 > font关键字属性值的简单研究,网页文字字体原创

font关键字属性值的简单研究,网页文字字体原创

来源:http://www.logblo.com 作者:金沙棋牌 时间:2019-11-05 18:52

三、font关键字现形

眼见为实,有些事情,要亲手经历才能有感触。您可以狠狠地点击这里:CSS font关键字属性值表现测试demo (每个测试项点击会显示应用的字号字体和行高)

首先是window7系统下,Chrome, FireFox和IE浏览器下的效果截图:

图片 1
图片 2
图片 3

在iOS9系统下,Chrome浏览器和Safari浏览器效果为:

图片 4
图片 5

从上面的实践结果可以看出:

  1. 规范文档里面提到的关键字所有浏览器都支持。根据MDN的显示,兼容性应该如下:

    特征 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    缩写 1.0 1.0 (1.0) 3.0 3.5 1.0 (85)
    字体字体 1.0 1.0 (1.0) 4.0 6.0 1.0 (85)
    支持font-stretch (Yes) 43 (43) ? ? ?

    但是各个浏览器的具体支持有些细节差异。首先字体不一样,这个我们是预料之中的,毕竟使用系统字体,不同系统默认字体不一样;然后不同关键字在不同浏览器不同系统下的字体大小不一样。例如,window下Chrome caption字体大小16px,而iOS下只有13px. 因此,在实际使用时候,我们还需要在下面再设定下font-size大小来保证一致性。

  2. 非规范标准的字体基本上浏览器都不支持,只有FireFox浏览器支持一部分,但是需要添加私有前缀-moz-,例如:

CSS

font: -moz-button;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6d236da84596842148-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6d236da84596842148-1" class="crayon-line">
font: -moz-button;
</div>
</div></td>
</tr>
</tbody>
</table>

因此,实际应用价值不大。

关键字

  CSS标准定义了6个系统字体关键字:

  caption: 由标题控件使用的字体样式,如按钮和下拉控件

  icon: 系统图标所用的字体样式,如文件夹和文件图标

  menu: 下拉菜单和菜单列表中文本使用的字体样式

  message-box: 对话框中文本使用的字体样式

  small-caption: 由标题小控件的标签使用的字体样式

  status-bar: 窗口状态条中文本使用的字体样式

网页字体设置

方法1、打开IE—工具栏——查看——文字大小(最大,较大,中……)设置好后重开IE即可。
方法2、建个记事本,输入如下内容:
body,td,tr,table,form,option,select,main,input,textarea,p
{
font-size:12px;
}

将它保存为css格式的样本文件,其中的“font-size”后的数值可自行修改,数值越大显示的字体就越大。
然后在ie里,在internet选项,辅助功能,勾选“不要用网页的字体大小”,同时选择“使用样式表编排文档格式”,单击浏览,选择你刚建的css文件,确定,就行了  

微软XP在国内实在是在深入人心,虽然微软已经宣布XP死期已到,但国内还是大是大把XP用...

样式优先级

通常用户看到的页面的样式会受到三层控制:

  • 第一层是浏览器的默认样式
  • 第二层是网页定义样式
  • 第三层是用户自定义样式

和CSS一样,后面的优先级 高于前面的,也就是说网页定义样式可以覆盖浏览器的默认样式,而用户自定义样式优先级最高。不过,当有 !important 时,网页样式可以覆盖用户自定义样式。用户!important > 网页!important > 用户 > 网页 > 浏览器默认

二、font关键字密探

根据W3C官方维基的解释,各个关键字的含义如下:

caption
包含说明文字控件的字体(如按钮,下拉等)。

icon
标签图标使用的字体。

menu
菜单使用的字体(如下拉菜单和菜单列表)。

message-box
弹框盒子里面使用的字体。

small-caption
标记小控件使用的字体。

status-bar
窗体状态栏使用的字体。

例如:

CSS

.caption { font: caption; }

1
.caption { font: caption; }

需要注意的是,使用关键字作为属性值的时候,必须是独立的,不能添加font-family或者font-size之类,这和缩写不是一个路子的如果你font使用关键字所谓缩写字体值,例如:

CSS

.font { font: 14px menu; }

1
.font { font: 14px menu; }

此时的menu是作为自定义的字体名称存在的,而不是表示系统的menu菜单字体。

根据Dreamweaver的显示,还有如下系统字体关键字(规范以外的):
button, checkbox, checkbox-group, combo-box, desktop, dialog, document, field, hyperlink, list-menu, menu-item. menubar, outline-tree, password, pop-up-menu, pull-down-menu, push-button, radio-button, radio-group, range, signature, tab, tooltip, window, workspace.

font-face

@font-face {
    font-family: 自定义名称;
    src: url(../font/test.eot);
    src: url(../font/test.eot?#iefix) format("embedded-opentype"),
         url(../font/test.woff) format("woff"), 
         url(../font/test.ttf) format("truetype"),
         url(../font/test.svg#jq) format("svg");
}
//EOT:IE专用;WOFF:标准;TTF:最常见(safari/android/ios);SVG:图形格式(IE和firefox不支持)

两种调用字体的方法

  【1】html(&#x + 小图标对应的unicode编码)

div{
    font-family: 自定义名称;
    -webkit-font-smoothing:antialiased;//字体抗锯齿、光滑度属性
    -mox-osx-font-smoothing: grayscale;//字体抗锯齿、光滑度属性
}
<div>&#xf048</div>

  【2】css( + 小图标对应的unicode编码)(不兼容IE7-浏览器)

div{
    font-family: 自定义名称;
    -webkit-font-smoothing:antialiased;//字体抗锯齿、光滑度属性
    -mox-osx-font-smoothing: grayscale;//字体抗锯齿、光滑度属性
}
div:before{
    content: "f048";
}
<div></div>

【实例】

  下面以一个实例来说明如何使用字体图标,最终的效果如下

  一般地,使用国内的iconfont网站来寻找需要的字体图标,如晴、阴、雨、雪图标,将其新建为一个项目,并将项目文件下载到本地。下载的文件中包含了需要的字体文件及使用范例

图片 6

  最终代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
@font-face {
  font-family: 'iconfont';  
  src: url('font/iconfont.eot');
  src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
  url('font/iconfont.woff') format('woff'),
  url('font/iconfont.ttf') format('truetype'),
  url('font/iconfont.svg#iconfont') format('svg');
}
.weatherBox input{
    position: absolute;
    clip: rect(0,0,0,0);
    pointer-events: none;
}
.weatherBox label{
    font-family: 'iconfont';
    -webkit-font-smoothing:antialiased;//字体抗锯齿、光滑度属性
    -mox-osx-font-smoothing: grayscale;//字体抗锯齿、光滑度属性
}
.weatherBox label + label{
    margin-left:10px;
}
.weatherBox label:hover{
    color: lightblue;
}
.icon-sunny:before { content: "e601"; }
.icon-snowy:before { content: "e603"; }
.icon-cloudy:before { content: "e605"; }
.icon-rainy:before { content: "e606"; }
</style>    
</head>
<body>
<div class="weatherBox">
    <label class="icon-sunny">
        <input type="radio" name="weather" id="sunny">晴
    </label>
    <label  class="icon-cloudy">
        <input type="radio" name="weather" id="cloudy">阴
    </label>
    <label  class="icon-rainy">
        <input type="radio" name="weather" id="rainy">雨
    </label>
    <label  class="icon-snowy">
        <input type="radio" name="weather" id="snowy">雪
    </label>    
</div>    
</body>
</html>

 

怎设置网页上的字体

打开IE—工具栏——查看——文字大小(最大,较大,中……)设置好后重开IE即可。

或者建个记事本,输入如下内容:
body,td,tr,table,form,option,select,main,input,textarea,p
{
font-size:12px;
}

将它保存为css格式的样本文件,其中的“font-size”后的数值可自行修改,数值越大显示的字体就越大。
然后在ie里,在internet选项,辅助功能,勾选“不要用网页的字体大小”,同时选择“使用样式表编排文档格式”,单击浏览,选择你刚建的css文件,确定,就行了  

字体:arial

我们页面的绝大部分内容字符都是中文,毫无疑问目前为止在网页上最常用也是最通用的显示中文的字体是宋体,但是宋体在显示英文、数字和英文符号时过于糟糕,比如©字符,所以我们一般期望通过CSS来实现用更好的字体样式来显示它们,然后用宋体来显示中文和中文符号。之所以选择arial是因为:

  • Windows和Mac都预装了这款字体,应该是使用最广泛的网页字体了。它的潜在对手 tahomahelvetica就没有这么幸运了。
  • 视觉设计的专业人士可能会认为在Windows中使用tahoma、在Mac中使用helvetica更好,比如淘宝的默认字体样式是 ` font: 12px/1 Tahoma, Helvetica, Arial, "5b8b4f53", sans-serif;

    这是一个很不错的选择,但是你也会发现Google、YAHOO、Youtube、Bing甚至[MSN的新版](http://www.msn.com/preview.aspx)都使用 arial 作为第一默认字体。所以从美观和可读性上来讲 arial `应该是完全可以接受的。

  • 一般情况下设置font-family都会在最后设置通用字体族以保证其安全性,比如Google的设置为 font-family:arial,sans-serif;,但是至少在非中文版的Win7下当编码是GBK时,IE8会因 sans-serif来渲染宋体,导致字体出现变形,这就是为什么淘宝需要在 sans-serif前加上宋体而Google无需这样做的原因。
  • 因为中文字体的选择非常有限,所以目前所有的主流浏览器都设置使用宋体来显示中文。Baidu的首页和搜索结果页使用 font-family:arial;可以从侧面说明这样做的安全性。可能有人注意到Firefox中国版默认显示的中文字体是微软雅黑,这是因为谋智网络擅自修改了用户自定义样式,不允许网页的样式覆盖浏览器设置的样式。也是由于类似的情况,我们要弹性设计网页非常重要。

使用英文字体作为第一默认字体会导致的问题之一就是中英文以及符号混排时的对齐问题、通过设置行高和hasLayout能解决绝大部分情况,但是都不会很完美,如果把字体改成“宋体”能彻底的解决问题。很明显,这个问题只出现在IE上。所以,如果你的网站很少使用英文、数字和英文符号,那么直接设置 {font-family:5b8b4f53;}也是很合理的选择。

CSS font关键字属性值的简单研究

2016/01/27 · CSS · 1 评论 · font

原文出处: 张鑫旭   

一、font关键字初窥初探

我们使用font属性,多半用做缩写,例如:

CSS

.font { font: 14px simsun; }

1
.font { font: 14px simsun; }

其语法如下:

[ [ || || ]? [ / ]? ]

1
[ [  ||  ||  ]?  [ /  ]?  ]

||表示或,?为正则通用示意,表示0个或1个。仔细观察上面的语法,会发现,后面没有问号,也就是是必须的,不可省的。

换句话说,font缩写要想生效,字体大小和字体是两个必不可少的属性值,其他字重,字样以及行高都是可缺省的。background虽然也支持缩写,但是呢,其并没有需要2个属性值同时存在的限制。

但是呢,我估计绝大多数小伙伴都不知道,font属性还支持关键字值,如下语法示意:

font:caption | icon | menu | message-box | small-caption | status-bar

1
font:caption | icon | menu | message-box | small-caption | status-bar

如果你设置font属性为上面中的一个值,就等同于设置font为操作系统该部件对应的font,也就是说直接使用系统字体。咦,怎么有似曾相识的感觉,其实我之前有介绍过类似的,就是CSS color, background-color等颜色相关属性,也是同样可以直接使用系统颜色的,例如Highlight关键字就是控件选中时候的颜色,具体可参见此文:“CSS1-CSS3
颜色知识知多少?”。

图片 7

那font这里关键字又对应系统中的那些部位的字体呢?

字体系列

【1】5种通用字体系列:拥有相似外观的字体系列

  serif字体:字体成比例,且有上下短线(衬线字体),包括TimesGeorgiaNew century Schoolbook

  sans-serif字体:字体成比例,且没有上下短线(无衬线字体),包括HelveticaGenevaVerdanaArialUnivers

  Monospace字体:字体不成比例,等宽字体,包括CourierCourier NewAndale Mono

  Cursive字体:手写体,包括Zapf ChanceryAuthorComic Sans

  Fantasy字体:无法归类的字体,包括WesternWoodblockKlingon

【2】特定字体系列:具体的字体系列

font-family:"宋体";
font-family:"arial";

【3】默认字体系列

  chrome/opera:"宋体"

  firefox:"微软雅黑"

  safari/IE:Times,"宋体"

font-family:字体系列1,字体系列2 ……
//【注意】若浏览器识别第一个字体,则以第一个字体显示;如果不识别,则尝试下一个。    
font-family: arial,“宋体”,“微软雅黑”;
//【注意】若写英文字体,一定要把英文字体写在前面,英文字体会影响到英文、数字和标点符号。
font-family: Times, 'New Century Schoolbook','New York', serif;
//【注意】若字体名中有一个或多个空格,要添加引号

【4】中文字体

  对于中文字体来说,常见的是宋体和微软雅黑。宋体是衬线字体,而微软雅黑是无衬线字体。衬线字体常用于排版印刷,而无衬线字体则常用于网页中

  一般地,一行中有30-40个文字时,行高为1.5时,有较好的阅读体验。对于标题来说, 更好的样式是取消其加粗设置,并改变其颜色,增加页面的层次感

 

优雅设置网页文字字体[原创],网页文字字体原创

微软XP在国内实在是在“深入人心”,虽然微软已经宣布XP“死期”已到,但国内还是大是大把XP用户,这个从IE6在国内占有率为22.2%可以看到。

 

图片 8

 

详细查看:

XP已经为大家服务10多年了,TA已经很老了,微软也宣布停止支持XP了,这本是件好事,但国内各种厂随后宣布继续为XP用户“保架护航”提供支持,这不能不说是个好事,但对于天天与IE6兼容性打交道的WEB前端们来讲,还真不是件好事!

 

这导致国内大多中文网站默认字体还要考虑“宋体”优先,但是“宋体”在Windows Vista+上面大大不如“微软雅黑”的丰满锐利,请看下图:

图片 9

那为何不优先“微软雅黑”呢?一段代码的事啊。

1 font-family'微软雅黑',’宋体’...

这一句不就解决问题了?开始我也这么认为:Vista+用户默认自带“微软雅黑”字体就会看到更好的网页文字渲染效果,XP用户默认自带“宋体”自然会看到宋体版网页。看起来挺完美的,好吧,来看张对比图:

图片 10

XP下,左边是宋体,右边是微软雅黑。

这下反过来了,XP下宋体显示效果比微软雅黑锐利均匀,好多了,其它浏览器显示效果也很差。可见上面方案确定已经失败。你或者反驳,这是你测试用的,XP默认是没有微软雅黑的,可以忽略。是的,但国内大多用的盗版,网上查了下各种厂商XP Ghost版本已经好心的帮用户装上了微软雅黑,当然必须内置了他们厂商赚钱的软件、网址导航等,还有部分设计等需要自己安装上的,所以此路真的不通。

 

那还是默认宋体吧,坐等XP完全消失那天。

不用,我们来分析一下,XP用的最多的应该是默认IE6,最大也只支持到IE8,那就好办了,专门针对IE8至IE6用hack专门写个样式:

1 font-familysans-serif;

就好了,至于XP下使用其它浏览器的,就先不考虑了,能自己选择浏览器的人应该也能换个更好的系统,是吧。

下面看下“font-family: sans-serif;”下的显示

XP系统IE6显示:

图片 11

哇,很赞,而且可以看到左边中英文混排情况下,英文显示的更为漂亮哦。(右边固定字体的中英混排英文显示有些难看)

 

Win8系统IE11显示:

图片 12

左右显示一致,以系统默认字体微软雅黑显示。

 

Win8系统opera下:

图片 13

这个不尽人意,左边是以默认宋体显示的,这种情况会发生在其它第三方浏览器上,如:FirefoxChrome等。

 

 

OS X Mavericks系统Safari 7.0下:

图片 14

显示也非常完善,英文略有差异,不过都非常棒。

 

想在线查看各种系统和设备显示示截图可访问微软官方出品(包括各种OS下,各种手机、pad设备下显示截图):

 

请原谅我的语无伦次吧,综上所述:
上面方法还是不够完善的,在最新Windows系统上第三方浏览器还是会以宋体显示(这取决于各个浏览器默认样式的字体定义),所以,最终结果是非常不推荐使用。

但无意中发现如果存在中英文混排,倒是可以使用

  font-familysans-serif

这绝对是个不错的选择。

 

浏览器默认的样式往往在不同的浏览器、不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做法。

四、font关键字的裨益价值与应用场景

扯了这么多,那font关键字值的价值如何?有没有合适的使用场景呢?有,且非常需要。

在很久以前,也就是IE6,IE7壮年的时候,平台设备有限,系统支持的中文字体也有限,我们基本上都是宋体到底。

但是,如今,对吧,微软雅黑,思源黑体,以及iOS系统使用的什么黑体,手机Android使用的默认字体之类,都比宋体好看,而后者中文字体要比微软雅黑更好看。

我们目前不想使用宋体,基本上就是使用微软雅黑字体:

CSS

.font { font-family: 'microsoft yahei'; }

1
.font { font-family: 'microsoft yahei'; }

但是,我就遇到过这样子的需求,iOS系统下不要使用微软雅黑字体,不好看,没有自带的中文英文字体好看,希望iOS系统下不要使用微软雅黑字体。怎么整?JS浏览器判断,CSS hack搞起?

不要这么烦了!10多年前浏览器就已经支持了这种功能,就是font值直接是系统关键字。

对照我们上面测试的最终效果图们,我们可以(三选一即可):

CSS

body { font: menu; font-size: 16px; }

1
2
3
4
body {
    font: menu;
    font-size: 16px;
}

CSS

body { font: small-caption; font-size: 16px; }

1
2
3
4
body {
    font: small-caption;
    font-size: 16px;
}

CSS

body { font: status-bar; font-size: 16px; }

1
2
3
4
body {
    font: status-bar;
    font-size: 16px;
}

就可以实现window系统下微软雅黑,其他系统使用默认字体的效果。OK,这些默认的中英文字体要比浏览器内置的字体好看很多,尤其英文字体这一块,例如IE浏览器默认是衬线字体,不好看。使用font关键字则是系统界面使用的无衬线字体,就舒服多了。

1 赞 1 收藏 1 评论

图片 15

字体风格

font-style: normal(默认)
font-style: italic(斜体)
font-style: oblique(倾斜)

 

未来

  • 通过对中英文及符号混排的测试, 我发现微软雅黑其实表现相当不错,包括英文数字和英文字符以及在IE6和IE7的显示效果上,但唯一的遗憾是在XP下如果安装了微软雅黑字体的用户没有打 开“使用屏幕字体的边缘平滑”选项的话,在firefox、Safari和Opera、特别是IE6下会非常模糊难以辨认。针对这个问题目前并没有很好的 解决方案,所以只有等到IE6使用比率非常小的时候才可能正式的使用它。或许需要到2014年,XP死掉的时候。
  • 虽然很早就有了@font-face,但是浏览器的支持、网速和商业问题,导致它很少被应用。最近关于字体的好消息是Firefox3.6将支持Web Open Font Forma。关于Web字体未来的相关信息可以看Web 字体的未来、关于 Web 字体:现状与未来和再谈 Web 字体的现状与未来。

原文地址: 默认Web字体样式 @ 随网之舞

有兴趣的朋友还可以看一下另一篇针对该文进行补充的《再谈 Web 默认字体》

字体加粗

【1】常用值

font-weight: normal(正常,默认)
font-weight: bold(加粗)

【2】所有值

  normal(正常)/bold(粗体)/bolder(更粗)/lighter(更细)

  100/200/300/400/500/600/700/800/900 (100为最细,900为最粗)

 

行高:1.5倍

  • 这是一个经验值,不同的产品对这个值要求可能不同,但我们一般会设置最常用的为默认值。比如YUI的font中是 font:13px/1.231 arial,helvetica,clean,sans-serif;即字体大小默认值是13px,行高是13*1.231=16.003px,默认的行高是默认字体的1.231倍。对于中文来说,常用的字体大小12px、14px、16px、18px等偶数大小,在IE6和IE7设置其行高也为偶数能解决一些特殊情况下的字体对其问题。
  • 在IE6和IE7中,行高值必须大于字体的2px才能保证字体的完整显示或当其作为链接时能有效显示下划线。
  • 设置 line-height时,注意不要使用单位(包括%在内),因为子节点会继承经过运算后的line-height值,所以当使用单位后浏览器会把 line-height计算成第一次定义的绝对值,而不会随着字体大小的变化而变化,而无单位的数值表示是所在容器的 font-size的倍数,所以设置为无单位的数值是最佳选择。
  • 深入CSS 行高非常有利于理解 line-height,值得一读。

字体变形

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

 

性能和效率

  • 大部分平台都有 arial,减少浏览器的查找时间。
  • 代码最少,书写方便。 arial基本上是名字最短的字体了,可以节约CSS的大小。
  • 所有的字母都小写,目前Google就是这样做的,好处是既可以编写更快也能提升Gzip压缩的效率。
  • 中文最好用unicode表示,比如使用宋体是 {font-family:5b8b4f53;},使用微软雅黑是 {font-family:5fae8f6f96c59ed1;},这样的好处是避免编码问题,同时能得到所有的主流浏览器的支持。
  • 使用正确的字体种类写法,避免使用引号,这样可以缩小CSS的大小。中文字体可以按上一条方式来编写。

字体大小

【1】绝对字体大小

  xx-small/x-small/small/medium/large/x-large/xx-large

【2】相对字体大小

  smaller/larger

【3】em/%

  1em = 100%

【4】默认字体大小

  chrome/firefox/opera/IE/safari:16px

【5】最小字体大小

  chrome:12px

  opera:9px

  safari/IE/firefox:无

font-size

  font-size字体大小设置的是字体中字符em框的高度,实际的字符字形通常比字符em框要矮,与字体类型有关

  值: xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | <length> | <percentage> | inherit

  初始值: medium

  应用于: 所有元素

  继承性: 有

  百分数: 相对于父元素的字体大小font-size

大小:12px

  • 12px是宋体能显示的极限,虽然微软雅黑能显示更小的字体,但目前的应用环境尚未成熟。由于宋体基本上是目前显示中文唯一的通用Web字体,所以12px成为最常用的字体大小。我们当然可以依据产品的需要来修改这个默认值。
  • 不用考虑基于字体大小(em)的设计。
  • 在Chrome3.0之后的中文版中,字体大小最小值是12px,比如你设置最小字体为10px,最后也变成12px。

行高

line-height: normal(默认)
line-height: 具体值

  关于行高的详细信息移步至此 

 

拿字体来说,各个浏览器默认的字体种类、字体大小和字体行高都不一样,比如IE8的中文版在Windows XP下显示网页时默认字体是宋体,而英文版肯定不会如此。所以我们需要统一设置默认的字体样式,以便实现一致的显示效果来保证设计的一致性和提高开发效率。

字体

  font: [[<font-style> || <font-variant> || <font-weight>]? <font-size>[/<line-height>?<font-family>]

    [注意]对于font-size,百分数相对于父元素来计算;对于line-height,百分数相对于元素的font-size来计算

 

本文由金沙棋牌发布于金沙棋牌官方平台,转载请注明出处:font关键字属性值的简单研究,网页文字字体原创

关键词:

上一篇:没有了

下一篇:没有了