@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体。可能有人要问,使用这种字体,IE兼容性怎么办,那就大错特错了,@font-face甚至向下兼容到IE4,想想看自己的页面上能有自己自定义的字体是一件多么帮的事情啊,现在贴出一点学习过程与大家分享 首先选一款你要用的字体,有免费下载的或者付费购买的(我反正是下免费...
CSS3 Shadow Effectstext-shadowbox-shadow1> text-shadowThe text-shadow property adds shadow to text.This property accepts a comma-separated list of shadows to be applied to the text.syntaxtext-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;ValuesValueDescriptionh-shadowRequired. The position of the horizontal shadow. Negative values are allowedv-shadowRequired. The position of the...
浏览器支持度CSS3属性: columns:规定列的宽度和列数 默认宽度、列数值为auto column-width:每栏的宽度 column-gap :两栏之间的间距距离 column-count : 栏目的数目 column-rule : color(色值) width(宽度) style(线条样式) 分栏中的分割线的颜色宽度及样式的设定 1、border-radius属性(圆角边框)eg:结合不同浏览器兼容问题,使用该CSS3新属性 eg: 2、box-shadow属性(阴影) eg:结合不同浏览器兼容问题,使用该CSS3新属性 eg: 3、...
学了就忘,该记录一下了字体下载网址:http://www.dafont.com http:www.google.com/webfonts用法:@font-face { font-family: ‘zwl‘; src:url(‘fonts/zwllll.eot‘) format(‘eot‘), url(‘fonts/zwllll.ttf‘) format(‘truetype‘), url(‘fonts/zwllll.woff‘) format(‘woff‘), url(‘fonts/zwllll.svg‘) format(‘svg‘); font-weight: normal; font-style: normal;}到这里定义好了字体,也就是说浏览器能识别zwl这...
经常能看到别人做前端的时候,实现一些漂亮的复选框或单选框按钮,由于现在项目原因,很多单选框和复选框看起来很不好看,于是,心血来潮打算自己实现了一遍。一、首先上css代码:其中,说明我以注释的形式写到里面;关于z-index我是基于一开始的定位考虑来设置的,此处如果谁要用到,自行思考;/*复选框效果*/
input[type=checkbox] {width:16px;height:16px;z-index:10;
} /* 此处不解释,定义的是复选框宽高*/
input[type=chec...
很多人只要一提到@font face规则,心中就会不由自主“哦~~”的一声:“这个我知道,可以用来生成自定义字符小图标!”话是没错,问题在于很多人就以为生成字符小图标就是@font face规则的全部,实际上只是功能之一,如果真正了解@font face规则,你会发现,@font face规则可以做的事情其实非常多,尤其我们不考虑IE7,IE8浏览器的情况下。一、 @font face的本质是变量虽然说CSS3新世界才出现真正意义上的变量var(参见此文:“了解...
本章给大家介绍CSS3如何实现字体抗锯齿渲染效果?-webkit-font-smoothing属性(实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服。在图标字体成为一种趋势的今天,抗锯齿渲染使用也越来越多。font-smoothing是非标准的CSS定义。它被列入标准规范的草案中,后由于某些原因从web标准中被移除了。但是,我们可以用以下两种定义进行抗锯齿渲染:-webkit-font...
很多人只要一提到@font face规则,心中就会不由自主“哦~~”的一声:“这个我知道,可以用来生成自定义字符小图标!”话是没错,问题在于很多人就以为生成字符小图标就是@font face规则的全部,实际上只是功能之一,如果真正了解@font face规则,你会发现,@font face规则可以做的事情其实非常多,尤其我们不考虑IE7,IE8浏览器的情况下。一、 @font face的本质是变量虽然说CSS3新世界才出现真正意义上的变量var(参见此文:“了解...
如果要用一个词来描述的话,可以把其称为字体变体(Font variants),对应的CSS属性就是font-variation-*属性,其包括连接(ligatures)、大写(caps)、数字(numerals)和替代字形(alternate glyphs)。这些属性可以让我们在Web上创建更精准、更漂亮的排版(文本)效果。事实上,Web上的排版总是要落后于它在它印刷中的效果。但这是可以理解的,因为打印在页面上的字体已经经过几个世纪的发展,可以说发展到一个复杂的程度。而在...
一、web font
web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体。先了解操作系统中的字体:
a)、安装好操作系统后,会默认安装一些字体,这些字体文件描述了每一个文字的形态,一般中文文件大,英文文件小,因为中文字符数多;在控制面板中可以找到文字文件夹,在C:\Windows\Fonts下也可以直接找到。另外如果想让自己的电脑上有更加丰富的字体,可以下载新的字体文件后复制到改位置。b)、我们在文档中显示...
@font-face语法规则 @font-face { font-family: ; src: [][, []]*; [font-weight: ]; [font-style: ]; } 说明: YourWebFontName:此值指的就是你自定义的字体名称,最好是使用你下载的默认字体,他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";” source:此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径; format:此值指的是你自定义的字体的格式...
CSS Sprites+CSS3 Icon Font CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。根据具体图标在大图上的位置,给背景定位。 CSS Sprites加速的关键,不是降低质量,而是减少个数。 做成Sprites的很大的原因是图片流量大,想象一下,如果将一...
很长时间,web设计师总是得用一些“web-safe”字体,现在@font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体。 原理是:字体文件放到web服务器,在需要的时候被自动下载到用户的计算机上。 一、@font-face介绍 语法: @font-face { font-family: ; src: [][, []]*; [font-weight: ]; [font-style: ]; } 参数说明: YourWebFontName:此值为你自己定义的字...
对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服。在图标字体成为一种趋势的今天,抗锯齿渲染使用也越来越多。 font-smoothing是非标准的CSS定义。它被列入标准规范的草案中,后由于某些原因从web标准中被移除了。 但是,我们可以用以下两种定义进行抗锯齿渲染 -webkit-font-smoothing: antialiased; /*chrome、safari*/-moz-osx-font-smoothing: grayscale;/*firefox*/ (1)Webkit在自己的引擎...
这篇文章主要介绍了真正了解CSS3背景下的@font face规则,具有一定的参考价值,感兴趣的小伙伴们可以参考一下很多人只要一提到 @font face 规则,心中就会不由自主“哦~~”的一声:“这个我知道,可以用来生成自定义字符小图标!”话是没错,问题在于很多人就以为生成字符小图标就是 @font face 规则的全部,实际上只是功能之一,如果真正了解 @font face 规则,你会发现, @font face 规则可以做的事情其实非常多,尤其我们不考虑I...