css实例--文字/字体

使用自定义字体:

  • 在CSS2中font-family属性只能使用两个字体:

    • 通用字体:Serif字体,Sans-serif字体,Monospace字体,Cursive字体,Fantasy字体;
    • 特定字体:如Times,Courier等,要求计算机已经安装该字体;
    • 使用@font-face:

      @font-face{
         font-family:example;
         src:url(‘example.ttf‘) , url(‘example.eot‘);/*IE9+*/
      }
      div{
        font-family:example;
      }
      

      在字体中,IE只支持自有的.eot,其他浏览器支持可能包括.svg,.ttf,.woff;  

时间: 2024-08-03 17:53:11

css实例--文字/字体的相关文章

div css文字字体行高行距 深入理解css行间距设置

div css文字字体行高行距 深入理解css行间距设置 div css文字字体行高行距 DIVCSS5带您深入理解css行间距设置,字体行距如何最简单地设置. 在文章中,要实现调节设置每行文字字体间距(行距)是使用line-height属性.(体感音乐) 要使得每行的文字一定的间距距离所以可以通过line-height样式实现.接下来DIVCSS5通过DIV CSS实例实现字体文字上下间距. 相关扩展CSS教程: css line-height div css字间距 为了观察到行距设置效果,新

div css每行文字显示一半 同时文字字体重叠显示不全解决方法

CSS DIV布局中出现单行或多行文字的每行文字内容不能显示全,上下行文字有一点点重叠现象,文字字体只显示一半解决方法,在低版本IE特别明显文字字体显示不全,在谷歌浏览器等高版本IE浏览器测试还好些. 新手布局时候特别爱出现DIV盒子里文字字体显示不完整,音乐沙发甚至上下行文字有一点重叠现象. css字体文字重叠显示不完整重叠字体字体文字重叠显示不完整同时有重叠重合效果截图 在DIV+CSS布局中造成这种字体显示不全,音乐沙发显示一半同时多行文字有一点点重叠情况原因:css行高小于CSS字体大小

CSS实例:鼠标滑过超级链接文字时改变背景颜色

先讲简单的: 通过CSS可以设置超链接在不同时刻的颜色: <style> a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FFFF} /* 已访问的链接 */ a:hover {color: #0000FF} /* 鼠标移动到链接上 */ a:active {color: #00FF00} /* 选定的链接 */ </style> <ul id="content"> <li&g

CSS 实例

CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的的背景图片 如何在水平方向重复背景图像 如何定位背景图像 一个固定的背景图片(这个图片不会随页面的其余部分滚动) 在一个声明的所有背景属性 高级的背景例子 背景属性的解释 CSS文本 设置不同元素的文本颜色 文本对齐 移除链接下划线 装饰文字 控制文本中的字母 缩进文本 指定了字符之间的空间 指定了行与行之间的空间 设置元素的文本方向 增加单词之间的空格 在一个元素内禁用文字换行 内部文字图像

CSS 天坑 I - 字体单位

首先,本文所讨论的“坑”是在做回应式网页设计( Responsive Web Design 以下简称 RWD)时显现的,如果你还只是在做传统的Web设计这算不上是一个坑,因为传统的Web页面是死的,不会自动调节不能适应各类设备屏幕尺寸自然不会产生任何尺寸变化的问题.相反地,要为不同设备上的用户提供最好的阅读或使用体验我们不可避免的就是对元素或字体的尺寸的测量与控制.由其是字体的尺寸,不知道你是否有以下的经历 同样的一个网页,同一份样式表,但: 字体在mac 上很漂亮,但在windows很难看 ?

CSS属性之字体(Font)

CSS属性之字体(Font) font:[ [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> ]  复合属性,各属性见下文. 必须同时包含font-size和font-family,且这两个值顺序不能变,其他关键字的值放到这两个值的前面,顺序可以随意打乱. 可以在字号值(font-siz

css中文字能够撑开高度吗

css中文字能够撑开高度吗:本章节介绍一个可能比较误导人的概念.那就是当一个div没有设置高度的时候,可能很多人认为它的高度是由内部的文字撑开的,真的是这样吗,下面就通过代码实例进行一下验证,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softw

css实现文字竖排效果

css实现文字竖排效果:在当前大家都习惯于横向排列的文本,但是绝大多数朋友也是知道的,在古代中国的文本是竖向排列的,本章节通过代码实例介绍一下如何实现文本的竖向排列效果,这样的需求在实际应用中也是有的.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.so

HTML学习笔记7——CSS控制文字的一些基本属性的使用

CSS控制文字的一些基本属性的使用: 一.CSS控制段落: 段落缩进:text-indent:20px; 文字方向:text-align:center; 文字修饰:text-decoration:underline:下划线 overline;上划线 Line-though;删除线 字与字之间的距离:letter-spacing:10px; ……(还有很多属性,可通过查找手册了解相关知识) 二.CSS控制字的大小字体及颜色 字体的颜色:color:blue:蓝色 斜体效果:font-style:i