很长时间，web设计师总是得用一些“web-safe”字体，现在@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。 原理是：字体文件放到web服务器，在需要的时候被自动下载到用户的计算机上。 一、@font-face介绍 语法： @font-face { font-family: ; src: [][, []]*; [font-weight: ]; [font-style: ]; } 参数说明： YourWebFontName:此值为你自己定义的字...
1.简介 @font-face用于自定义字体样式，从服务器端取得字体样式，使浏览器可以显示客户端并不存在的样式效果，给用户带来更好的展示体验。 @font-face并不是CSS3的新特性，早在98年就被写入CSS2的规范当中，目前在IE6都可支持。 2.语法 @font-face { font-family: ; //自定义的字体名称 src: [][, []]*; //字体文件路径 [...
new/2019-09-27-201927/
为什么要记录一下？因为今天我要设置一个字符加粗，然后就用font-weight:200,没有任何效果。现在看来很可笑，400才相当于normal，200怎么加粗，奇怪的是也没有变细。所以得研究一下font-weight的工作原理，以下正文。 一、使用介绍 font-weight设置文本的粗细，文本粗细设置属于一种比较复杂的字体样式定义，之所以说它复杂，是因为字体本身粗细变化千变万化，没有统一标准，对于字体粗细的具体定义也各不相同。 属性值：norma...
CSS3里面加入了一个“-webkit-font-smoothing”属性。 这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。 加上之后就顿时感觉页面小清晰了。 淘宝也在用哦！ 它有三个属性： none ------ 对低像素的文本比较好 subpixel-antialiased ------默认值 antialiased ------抗锯齿很好 例子： body{ -webki...
最近因为项目上需要用到这个字体图标，但是它里面的许多也不能完全满足项目需要，因此就考虑将这个图标导出，然后自己再添加一些其他图标使用 搜索了些解决方案，如：http://www.oschina.net/translate/how-to-convert-font-awesome-to-png-icons，但是上面的步骤过于简单，一个新手完全不会使用，比如Python自己就一点都没接触过，因此自己走了许多弯路。 本文一方面记录以便以后自己再次使用，最重要的是将我自己的每个步...
font-size属性有没有继承性:这问题自然再简单不过了，不过可能初学者有时对这个问题可能存在疑问，会造成处处为标签内的元素设置字体。这里可以给出一个肯定的答案，font-size数据具有继承性，这样有利于对网页字体进行统一设置。 代码实例如下: 蚂蚁部落body{ font-size:12px;}蚂蚁部落 太阳出来了 由以上代码的运行表现可以看出，font-size属性具有继承性。原文地址是:http://www.51texiao.cn/div_cssjiaoc...
问题：font-awesome里面的小图标是怎么产生的？ 1.打开浏览器调试工具，发现font-awesome user这个小图标，其css样式是. icon-user:before { content: "\f007";}[class^="icon-"]:before, [class*=" icon-"]:before { text-decoration: inherit; display: inline-block; speak: none;} 2.根据css文件路径，我们打开font-awesome.css发现它是引用了css3 @font-face这个属性。 @font-face { font-family: FontAwe...
图标字体(IconFont)介绍 图标字体(IconFont)现在越来越被广泛使用，大大提高了网页的多样化，解决了视网膜屏幕失真的问题。 据说微软从IE4开始支持的这个私有方法(@font-face)，后来W3在CSS2中也引入这个方法，但是后来CSS2.1又被删除了，真是遗憾。直到CSS3，又一次引入，这真是个好消息。详细见：http://www.w3.org/TR/css3-fonts/。 不过经常会被问到，移动端用没问题，PC上IE可以了，我可以负责任的说：当然可以。原因上面...
Css font-family字体对照表 宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei 微软正黑体 Microsoft JhengHei 新宋体 NSimSun 新细明体 PMingLiU 细明体 MingLiU 标楷体 DFKai-SB 仿宋 FangSong 楷体 KaiTi 仿宋_GB2312 FangSong_GB2312 ...
1、什么是iconfont？ 说白了就是用图标制作而成的一套字体文件，本质是一个字体文件（扩展名是ttf\woff\svg的文件）。它是用来制作网页常用小图标的一种方法。以下是天猫首页使用iconfont的场景： 2、用iconfont有什么优缺点？ 1）文件小，以往常用的sprite图如果要放上上百个图标，那么这张图的大小可能有100k+，而上百个图标做成的iconfont文件，往往只有十几k 2）可缩放，因为是矢量的字体文件，因此不像s...
Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。 一个字库，585个图标 仅一个Font Awesome字库，就包含了与网页相关的所有形象图标。 无需依赖JavaScript Font Awesome完全不依赖JavaScript，因此无需担心兼容性。 无限缩放 无论在任何尺寸下，可缩放的矢量图形都会为您呈现出完美的...
一个交互比较多的UI图里面可能会有很多小图标，一般可用sprites图将多个小图标弄成一张大图，或者其它的办法，各种方法的比较可参见博主的另外一篇博客使用css3新属性clip-path制作小图标，本文深入讨论使用icon-font的的制作方法：在PS里面导出svg，制作字体图标。这种方法既有sprites图不需要浏览器发多次请求的优点，也有使用clip-path/svg矢量无损的优点，并且支持IE6及以上。 使用sprites图可以自行用PS将多个小图标...
@font-face{ font-family:'cyjxy'; src:url('font/创意简细圆.ttf')format('turetype'); font-weight: normal; font-style: normal; }.main p{font-family:"cyjxy"; font-size:60px;}创意简细圆创意简细圆创意简细圆创意简细圆创意简细圆创意简细圆创意简细圆 字体文件是放在font文件下 为何调用不成功。 回复讨论(解决方案) 我用的...
@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中。 语法规则 首先我们一起来看看@font-face的语法规则： @font-face { font-family: ; src: [][, []]*; [font-weight: ]; [font-style: ]; } font-family: ：自定义字库名称（一般设置为所引入的字库名），后续样式规则中则通过该名称来引用该字库。src ：设置字体的加载路径和格式，通过逗号分隔多...