@font-face css3自定义个性化字体

使用第三方平台转换字体文件为font-face所支持的格式。

TureTpe(.ttf)格式

  支持浏览器:IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+

OpenType(.otf) 格式

  支持浏览器:Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+

Web Open Font Format(.woff) 格式

  支持浏览器:IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+

Embedded Open Type(.eot)格式

  支持浏览器:.eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】

SVG(.svg) 格式

  Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+

引入字体

@font-face {  
     font-family: "FamilyName";  
     src: url("path.eot");  
     src: url("path/to/*.eot?#iefix") format("embedded-opentype"),   
     url("path/to/*.woff") format("woff"),   
     url("path/to/*.ttf") format("truetype"),   
     url("path/to/*.svg#FamilyName") format("svg");  
     font-weight: normal;  
     font-style: normal;  
     }  

    FamilyName 会在刚刚下载的文件中的css 文件中有,可以直接使用,不用在定义

使用字体

    直接 style="font-family:FamilyName" 或直接class 内定义使用到指定元素上。

   div{font-family:myFirstFont;}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我和未来有约会

VisualState“视图状态”使用心得

在编辑silverlight中button控件模板的时候,能看到左侧的“Status”状态栏里多了很多状态,这些就是控件的“视图状态”。 其中这里的视图状态...

33970
来自专栏老马寒门IT

01Vue.js快速入门(一)Vue概念及Helloworld

Vue是一个前端的双向绑定类的框架,发音[读音 /vjuː/, 类似于 view]。新的Vue版本参考了React的部分设计,当然也有自己独特的地方,比如Vue...

22590
来自专栏24K纯开源

Qt Style Sheet实践(二):组合框QComboBox的定制

导读      组合框是一个重要且应用广泛的组件,一般由两个子组件组成:文本下拉单部分和按钮部分。在许多既需要用户选择、又需要用户手动输入的应用场景下,组合框能...

74870
来自专栏Nian糕的私人厨房

CSS 鼠标悬停图片,显示隐藏文本

我在 JavaScript 鼠标悬停图片,显示隐藏文本 这篇博文当中实现了同样的效果,只不过是通过 JS 来实现的,但其实,通过 CSS 动画也能实现同样的效果...

16040
来自专栏Nian糕的私人厨房

CSS 使用 Flex 布局来制作一个骰子

我在上一篇博文 CSS 布局_2 Flex弹性盒中,对 Flex 弹性盒有着详细的介绍,在这里,我们使用 Flex 弹性盒布局,来实现骰子的布局,一个面可以设置...

12540
来自专栏Android干货

Android项目实战(三十六):给背景加上阴影效果

32650
来自专栏iOS开发随笔

iOS类似淘宝头条的文字滚动广告

最近两个项目都用到类似淘宝头条的功能,就是文字上下无限循环滚动,所以决定简单封装一下,以便以后使用。由于习惯用SDCycleScrollView来做广告图的无限...

68530
来自专栏攻城狮的动态

iOS视图编程指南(View Programming Guide for iOS)(译)

29940
来自专栏程序员叨叨叨

Mac使用小技巧

许多从windows转向Mac的童鞋们都会感觉鼠标的滚动方向不习惯,这里告诉大家如何修改鼠标滚动方向:

7110
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native按钮详解|Touchable系列组件使用详解

尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://www.devio.org) 在做App开发过程中离不了的需要用户交互,说到交互,...

58670

扫码关注云+社区

领取腾讯云代金券