使用自定义字体

常用CSS代码 | 文字与字体_java

除IE外,目前主流的浏览器都支持.ttf 和 oft 两种字体。下面为示例代码的效果和代码:

常用CSS代码 | 文字与字体_java_02

 
  
  
  
  
  
  使用@font-face自定义字体
 
{
: ;
: ()
    ,(); }
{
:;
:; 
}

 
 

这段文字使用的是徐静蕾字体。


这段文字使用的是默认字体。
 

文本缩进和首字符下沉

我们经常会在报纸或杂志上看到首字下沉效果,这类效果,在网站上也会经常看到,示例效果和代码如下:


 
  
  
  
  
  
  段落首字符下沉、缩进及特殊显示
  
  {:;}
  {:-;}
  {:;}
  :{
  :;
  :;
  :;
  }
  :{
  :;
  :;
  }
  :{
  :;
  :;
  }
  .:{
  :;
  }
  
 
 
  
  段落首字符下沉和15像素的缩进
  
  
  if -首字符不下沉、首字符英文小写和悬挂缩进(-6像素)
  
  
  if 段落的首字符不下沉、首字母英文大写
 

自定义文本被选中的样式

当鼠标选中网页上的文本时,默认样式为蓝底白字,CSS3中,这种样式可以自定义的。示例代码和效果如下:


 
  
  
  
  
  
  自定义文本选中样式
  
::{
:;
:;
}
::{
:;
:;

}


 

 
  自定义文本选中样式演示网页
 

文本对齐、间距

文本对齐是排版中常用的属性,由于不同语言的阅读习惯不同,对齐方式也不同,常用到的代码如示例代码:

  {: }
  {: }
  {: }
  .{:;}
.{:;}
.{:;}
.{:;}
.{:;}
.{:;}
.{:;}
.{:;}
 

画线、粗体、斜体

CSS可以实现文本的装饰效果,下面的代码分别在文本的上边下边中间添加直线,具体效果如下:


 
  
  
  
  
  
  文本装饰
  
  .{:;}
  .{:;}
  .{:;}
  .{:;}
  .{:;}
  .{:;}
  .{:;}
  
 
 
  文本装饰
  文本装饰
  文本装饰
  文本装饰blink浏览器不支持
  粗体字
  italic斜体
  oblique倾斜
  斜体(italic)是一种简单的字体风格,对每个字母的结构有一些小改动,来反映变化的外观。
  倾斜(oblique)文本则是正常竖直文本的一个倾斜版本。
  通常情况下,两种效果在浏览器中看上去完全一样。
 

阴影、毛玻璃、金属效果

{
: ;
}
{
: ;
:;
: ,;
:;
}
:{
:;
:;
: ;
}
.{
:;:;
:;
:;
:;
:;

:();
:();
:();
:();
:();

:;
:(,,,);
: ;

}
{
:;:;
:;:;
:;
}
.{
:%;:%;:;
:(,%,%,);
:;
}
   {
:(-);
:(-);
:(-);
:(-);
:(-);
}
常用CSS代码 | 文字与字体_java_03 

文本溢出处理

常用CSS代码 | 文字与字体_java

在我们的工作中,为了保证设计的美观性,我们经常要处理文本内容超出容器范围的问题,常用的处理方式有:简单的裁剪,隐藏,隐藏并省略号显示,使用滚动条,示例代码如下:


 
  
  
  
  
  
  Document
  
  .{
:;
:; :;:;
:;
:;
}
  .{
:;
:; :;:;
:;
:;
}
.{
   :;
   :;
   :;
   :;
}
.{
   :;
   :;
   :;
   :;
}

  
 
 
  如果此处的文字较多,将自动裁切裁切裁切裁切
  
  如果此处的文字较多,将自动用省略号代替!
  
  如果此处的文字较多,将自动隐藏!如果此处的文字较多,将自动隐藏!如果此处的文字较多,将自动隐藏!如果此处的文字较多,将自动隐藏!如果此处的文字较多,将自动隐藏!
  
  如果此处的文字较多,将出现滚动条!如果此处的文字较多,将出现滚动条!如果此处的文字较多,将出现滚动条!
常用CSS代码 | 文字与字体_java_03 

 常用字体栈

常用CSS代码 | 文字与字体_java


1 基于Times New Roman的字体风格 

font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif; 

2 基于现代Georgia的字体风格

 font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; 

3 基于Garamond的更传统的风格 

font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; 

4 基于 Helvetica/Arial的字体风格

 font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; 

5 基于Verdana的字体风格 

font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif; 

6 基于Trebuchet的字体风格 

font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif; 

7 更为深度的“Impact”字体风格 

font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif; 

8  monospace字体风格 

font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

中文常用风格:

font-family: Helvetica, Tahoma, Arial, STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑", SimSun, "宋体", Heiti, "黑体", sans-serif;