CSS学习之font - CSS - The Missing Manual

font-family

• font-family属性的属性值往往使用几种类似字体构成一个font stack，浏览器从第一个依次确认用户本地是否有该字体。
  例font-family: Arial, Helvetica, sans-serif;
  如果字体名字多余一个单词，使用引号。
  例font-family: "Times New Roman", Times, serif;

使用web fonts

• font-family属性如果使用了用户本地电脑上没有的字体，那么浏览器会显示默认字体，因此需要选择比较大众的字体。解决方法可以使用web fonts：在css中通过@font-face选择器，使浏览器下载你本地的字体来使用。例：
  @font-face {
font-family: "League Gothic";
src = url('fonts/League_Gothic-web font.woff);
}
p {
font-family: "League Gothic";
}
  一般习惯于把font-face的引用放在css的最开头。
  访问上级目录使url写法如下'../fonts/my_font.woff'

• 引用web font的时候，不同的浏览器支持不同的字体类型。

  • EOT font for IE8
  • WOFF fonts for 所有主流浏览器包括ie9
  • SVG fonts for older phones and tablets
  • http://www.fontsquirrel.com/tools/webfontgenerator 可以将字体从.ttf或.otf转换为各种格式

• 如果为了兼容各种浏览器，需要引用一个字体的多种格式，写法如下例（可以兼容所有浏览器）。如果只需要兼容主流浏览器那么只需要woff2和woff。

@font-face {
 font-family: 'League Gothic';
 src: url('fonts/League_Gothic-webfont.eot'); //for 兼容ie8的特殊版本的ie9
 src: url('fonts/League_Gothic-webfont.eot?#iefix') format('embeddedopentype'), //for ie8 or earlier 
 url('fonts/League_Gothic-webfont.woff2') format('woff2'),
 url('fonts/League_Gothic-webfont.woff') format('woff'),
 url('fonts/League_Gothic-webfont.ttf') format('truetype'),
 url('fonts/League_Gothic-webfont.svg') format('svg');
}

• font的属性

  • font-weight: normal, bold…
  • font-style: normal, italic…
  • 同一字体，有多少种不同属性字体就需要用@font-face来引用多少次。引用方式如下：
    
    1. 不兼容ie8和特殊ie9的方式，需要使用两个属性来表示该字体的weight和style，然后列举出所有情况，例:
       @font-face {
font-family: 'PTSans';
src: url('PTSansRegular.woff2') format('woff2'),
url('PTSansRegular.woff') format('woff'),
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'PTSans';
......
font-weight: normal;
font-style: italic;
}
       然后在html里使用<strong></storng>和<em></em>来设置加粗和斜体
    2. 兼容ie8和特殊ie的方式就是用不同的font的名字来表示具有不同weight和style的字体，例:
       @font-face { font-family: 'PTSansBold';
......
}
@font-face { font-family: 'PTSansBoldItalic';
......
}
       使用方法设置如下css然后再使用strong和em标签（需要设置所有style和weight为normal，不然可能会加粗加粗过的字体等）：
       p {
font-family: PTSansRegular;
font-size: 48px;
font-style: normal;
font-weight: normal;
}
p em {
font-family: PTSansItalic;
font-style: normal;
font-weight: normal;
}
p strong {
font-family: PTSansBold;
font-style: normal;
font-weight: normal;
}
p strong em, p em strong {
font-family: PTSansBoldItalic;
font-weight: normal;
font-style: normal;
}

• 使用google的web font。

  • 在官方网站上找到你想用的字体之后，在head标签里插入相应的link就可以使用了。例:
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,300ital
ic, 400italic|Oswald:400,700' rel='stylesheet' type='text/css'>
    400表示normal700表示italic，加了italic表示支持该粗细的斜体。使用方法如下：
    em {
font-family: "Gentium Book Basic", Palatino, serif;
font-weight: 400;
font-style: italic;
}
  • 另一种方法是使用@import，来将字体链接加入到外部样式表中。

• 字体的使用涉及到商业版权，最好不要使用未经允许作为web font的非免费字体，就算你付费在自己的电脑上下载了字体也不代表你可以将此字体放到web服务器上使用。

• 一些可以获得免费web fonts的网站

  • The League of Moveable Type (http://www.theleagueofmoveabletype.com).
  • Exljbris font foundry (http://www.exljbris.com).
  • The Open Font Library (http://openfontlibrary.org).
  • Font Squirrel (http://www.fontsquirrel.com).
  • Google Fonts (http://www.google.com/fonts).

font的颜色 - color属性

• color: #ffffff
• color: rgb(100%, 100%, 100%);
• color: rgb(255, 255, 255);
• color: rgba(255, 100, 50, .5);
  ie8及earlier不支持rgba，因此需要先定义rgb再定义rgba来兼容ie8.
• color: hsl(0, 100%, 50%);
• color: hsla(0, 100%, 50%, .5);

font的大小 - font-size属性

• px单位，不受任何影响，大小固定（在Retina屏上，1px代表两个像素点）
• base text size（大多浏览器的非header标签的缺省字体大小）： 16px
• keywords设置字体大小，在缺省字体大小上进行修改： xx-small, x-small, small, medium, large, x-large, xx-large（缺省大小为16px时对应为9px 10px 13px 16px 18px 24px 32px）
  使用方法：font-size: large;
• 百分比设置字体大小，也是在缺省大小的基础上。
  使用方法：font-size: 200%;
• em单位： 就是百分比 2em -> 200% .5em -> 50% （缺省大小往往可能是从父级元素继承过来的，如果有多层嵌套的标签，那么很可能通过em不断相乘使得字体越来越小或越来越大）
• rem单位，与em类似，不过它的缺省字体大小不继承父元素，而永远是base text size，这就可以避免多层嵌套造成的不断相乘的问题。ie8及earlier不支持。
• 设置base text size的方法：html { font-size: 20px; }

其它常见font属性

• font-weight: normal / bold …
• font-style: normal/ italic …
• text-transform: uppercase/ lowercase/ none … //继承属性，因此需要对子元素设置none
• font-variabt: small-caps … (大写字母会小一点）
• text-decoration: underline/ overline/ none…
• letter-space: -1px/ .7em …
• word-space: 2px …
• text-shadow: -4px 4px 3px #666 (左负右正 上负下正 宽度 颜色), 1px -1px 2px #000 (可以同时加多个阴影); //不兼容ie9及earlier
• line-height： 150%；（继承属性，小心使用）
• text-align： left/ right/ justify/ center;
• text-indent: 25px/ 5em; //缩进，em表示缩进几个字母
• 段落距离例：p {margin-top: 0; margin-bottom: 0; }