CSS - 导入Google Web 字体

@import url('http://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900'); body{ font-family: 'Poppins',sans-serif; }…

CSS3：不可思议的border属性&Web字体图标Font Awesome

CSS3:不可思议的border属性转载至——译文:不可思议的CSS border属性原文:Magic of CSS border property Web字体图标Font Awesome 转载至——原文:A List of Font Awesome icons and their css content values…

1.图形字体<i class="fa fa-heart"></i> 操作类名,需<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">导入.css2.过渡动画transition: 过渡属性过渡时长运动速度延迟时间;/*持续时间*/transition-duration: .3s;/*延迟时间*/transition-d…

css 14-CSS3属性详解：Web字体

14-CSS3属性详解:Web字体 #前言开发人员可以为自已的网页指定特殊的字体(将指定字体提前下载到站点中),无需考虑用户电脑上是否安装了此特殊字体.从此,把特殊字体处理成图片的方式便成为了过去. 支持程度比较好,甚至 IE 低版本的浏览器也能支持. #字体的常见格式不同浏览器所支持的字体格式是不一样的,我们有必要了解一下字体格式的知识. #TureTpe格式:(.ttf) .ttf 字体是Windows和Mac的最常见的字体,是一种RAW格式. 支持这种字体的浏览器有IE9+.Firef…

Google Font字体本地化使用提高网站访问速度

Google Web font在国内经常不稳定,速度在国内延迟也很高,而引发网页打开速度慢. 一.常见的字体格式介绍不同的浏览器对字体格式支持是不一致的,常见的如下: 1.TureTpe(.ttf): .ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,因此他不为网站优化,支持这种字体的浏览器有[IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+]: 2.OpenType(.otf): .otf字…

如何把你的图标转换成web字体

在这篇教程中,我们将使用一个免费的Web应用程序IcoMoon将矢量图转换成Web字体,然后将生成的字体通过css应用到Web页面中. 通常我们在网站中必不可少的会使用到一些小图标.在正常尺寸下,布局看上去一切OK,但当我们将页面进行放大显示后,你会发现icon图标变得有些模糊,而基于文本的标题依然清晰可见.为了适应各种情况,我们有必要试着解决它: 解决方案:创建双倍大小的Sprite图,然后通过css样式,设置他们只显示二分之一尺寸. 虽然这样的方法让他们在Retina屏上显示的大小是正常的,…

制作web字体：CSS3 @font-face

@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,另外@font-face这个功能早在IE4就支持了,比如说首页的Logo,Tags以及页面中的手写英文体这些都可以用@font-face来实现了. 首先我们一起来看看@font-face的语法规则: @font-face { font-family: <YourWebFontName>; src: <sou…

从零开始学 Web 之 CSS3（六）动画animation，Web字体

大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅博客园:http://www.cnblogs.com/lvonve/ CSDN:https://blog.csdn.net/lvonve/ 在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目.现在就让我们一起进入 Web 前端学习的冒险之旅吧! 一.动画 1.创建…

嵌入web字体

@font-face模块可以帮助我们轻松解决Web页面中使用优雅字体的方式,而且我们可以根据需要自定义多种字体,但是每个@font-face只能定义一种,若需要多个字体就启用多个@font-face规则. @font-face 主要就是把自己想要的,或者自己定义的Web字体嵌入到Web页面中,然后这些字体就会被放置在服务器上,浏览器会根据指定的命令将对应的字体下载到本地缓存,使用它来修饰文本.也就是我们所说的Web字体嵌入. 描述符值描述 font-fami…

中文标准web字体

标准的简体中文web字体: Windows OS X 黑体:SimHei 冬青黑体: Hiragino Sans GB [NEW FOR SNOW LEOPARD] 宋体:SimSun 华文细黑:STHeiti Light [STXihei] 新宋体:NSimSun 华文黑体:STHeiti 仿宋:FangSong 华文楷体:STKaiti 楷体:KaiTi 华文宋体:STSong 仿宋_GB2312:FangSong_GB2312 华文仿宋:STFangsong 楷体_GB2312:KaiTi…

Web 字体的选择和运用

首先来看一则设计师和前端小白的日常,这是使用 Mac OS 的设计师给的效果图这是使用 Windows 开发的实际产品页面我跟你们说,设定字体要按照基本法! (PS: 以上截图不代表网站真实面貌,仅为说明.) 先来看看字体和字族的关系真的是一图胜千言啊!没看明白的话再来一张图! 这张图里的 Helvetica Neue Ultra Light 算是一个字体,而所列的这些字体都算是 Helvetica Neue 字族的字体. 一个字族需要满足指定字符集 Unicode Table 这张 un…

Web 字体 font-family 再探秘

之前写过一篇关于Web字体简介及使用技巧的文章: 你该知道的字体 font-family. 该篇文章基本没有太多移动端的字体选择及分析.并且过了这么久,如今的 Web 字体又有了一些新的东西,遂有此文. 正文从这里开始. 各大网站最新 font-family 作为前端的一个习惯,浏览各个网站的时候总是喜欢打开开发者工具时不时审查元素一下.看了一下一些比较出名的网站移动端的 font-family: 天猫:font-family: "PingFang SC",miui,system-ui…

Web 字体 font-family 浅谈

前言最近研究各大网站的font-family字体设置,发现每个网站的默认值都不相同,甚至一些大网站也犯了很明显的错误,说明字体还是有很大学问的,值的我们好好研究. 不同的操作系统.不同浏览器下内嵌的默认字体是不同的,错误的字体设置会导致页面在不同环境渲染的混乱,选择一套合适的字体是打造优秀网页的第一步.通过本文,我们会介绍字体的知识点,并探索在PC和Mobile两端该如何正确的设置字体. 字体基础知识字体的分类 serif(衬线) sans-serif(无衬线) monospace(等宽)…

Angular JS | Closure | Google Web Toolkit | Dart | Polymer 概要汇集

AngularJS | Closure | Google Web Toolkit | Dart | Polymer GWT https://code.google.com/p/google-web-toolkit/ Google Web Toolkit (GWT) 是一种开源 Java 软件开发框架,可以使不会使用第二种浏览器语言的开发人员编写 Google 地图和 Gmail 等 AJAX 应用程序时更加轻松.GWT 可在使您避免这些麻烦的同时,还为您的用户提供同样的与标准兼容的动态体验.您只…

几种web字体格式

目前,文字信息仍是网站最主要的内容,随着CSS3技术的不断成熟,Web字体逐渐成为话题,这项让未来Web更加丰富多彩的技术拥有多种实现方案,其中之一是通过@font-face属性在网页中嵌入自定义字体,主流的浏览器都支持这项技术,本文介绍主要的几种Web字体格式及字体格式转换. Web字体格式介绍 TrueType (.ttf) Windows和Mac系统最常用的字体格式,其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体,这使得它们比基于矢量的字体更容易处理,保证了屏幕与打印…

web设计经验<七>13步打造优雅的WEB字体

今天,大多数浏览器已经默认支持Web字体,日趋增多的字体特性被嵌入最新版HTML和CSS标准中,Web字体即将迎来一个趋于复杂的崭新时代.下面是一些基本的关于字体的规则,特别适用于Web字体. 原文地址:creativebloq 译者:特赞Tezign 顺便附上一个神器:<前端工程师的菜!姗姗来迟的中文WEBFONT(附神器推荐)> 印刷字体是静态的,而网页字体却是圆滑可塑的.设计师必须预测跨浏览器及终端用户的最终结果,而不仅限于学习如何实现某种特定的视觉外观.除了掌握简单的规则以外,他们一…

《精通CSS：高级Web标准解决方案》学习笔记（上）

鉴于国产CSS书籍基本都是辣鸡的现状,我在半年前动用某工作室的购书资金采购了一些技术书籍,这本广受好评的<精通CSS>也在其中.但是在阅读过后我深深的感觉到,如果说CSS本来已经是一种很琐碎的布局知识集合的话,那这本书只能说是更加琐碎了,因为这只是一本纯纯的经验分享.而且随着前端技术的快速发展,明显能感觉到,这本书里的很多内容已经过时了.所以,虽然我写了笔记,但是仍然强烈不推荐把这本书当作是CSS圣经,而应该作为一本床头读物(不过我相信你不会的,因为它太无聊了). 看完以后我最大的感慨是——果…

ICOMOON！强悍的WEB字体图标制造器/Web字体使用实例

IcoMoon!一个可以通过个性化设置来创建自定义图标(字体)的生成器!也可以将SVG图片,转换成web字体 IcoMoon是一项免费的服务,通过使用不同设置使我们能够创建自定义的ICON图或ICON字体.当然了,网站也有资源打包下载!包括大多数流行的免费图标集(在its library里搜索),您可以挑选其中任何一个自己钟意的图标下载.同时,它会提供两种下载方式:图片版和字体版! 图片版是经过CSS Sprites技术处理的PNG格式,字体版有多种格式供我们选择(EOT,SVG,WOFF,TT…

web字体格式及几种在线格式转换工具介绍

原文地址:http://blog.csdn.net/xiaolongtotop/article/details/8316554 目前,文字信息仍是网站最主要的内容,随着CSS3技术的不断成熟,Web字体逐渐成为话题,这项让未来Web更加丰富多彩的技术拥有多种实现方案,其中之一是通过@font-face属性在网页中嵌入自定义字体,主流的浏览器都支持这项技术,本文介绍主要的几种Web字体格式及字体格式转换. Web字体格式介绍 TrueType (.ttf) Windows和Mac系统最常用的字…

web字体图标的使用

今天给大家介绍一些web字体图标的下载和使用一.WEB字体 1. 下载外部的字体图标的网站 font-awesome.com 2.CSS文件和font文件 3.html文档中使用外部字体 4.下载字体的CSS文件 5.在HTML文档中添加CSS样式连接和应用外部字体 6.运行浏览显示…

十三章：使用WEB字体

1.WEB字体可以使用一系列文件类型,下面介绍三种字体类型: (1)内嵌OpenType (2)TrueType和OpenType台式机使用的标准字体文件类型 (3)WEB开放字体格式. 2.构造子集:节省页面重量的一种方法是构造子集,构造子集是通过仅包含确定使用字符削减实际字体大小的方法. 3.在网站上使用Web字体有两种方式:自托管和Web字体服务. (1)自托管Web字体来源于你自己的服务器,就像其他的资源一样.如果需要与字体相关的花费也是一次性的购买支出. (2)Web字体服务:通常提供…

工作笔记——web字体格式转换

转载自:http://blog.csdn.net/xiaolongtotop/article/details/8316554 目前,文字信息仍是网站最主要的内容,随着CSS3技术的不断成熟,Web字体逐渐成为话题,这项让未来Web更加丰富多彩的技术拥有多种实现方案,其中之一是通过@font-face属性在网页中嵌入自定义字体,主流的浏览器都支持这项技术,本文介绍主要的几种Web字体格式及字体格式转换. Web字体格式介绍 TrueType (.ttf) Windows和Mac系统最常用的字体格式…