如何在网页使用自定义的字体

有时候我们需要在网页上显示自定义的字体,方法在网上有很多,下面说下自己的看法。先看看演示效果:

效果演示

2014年9月4日 星期四 13:38:42

美国 00:38:42澳门威尼斯人赌场

日本 14:38:42

英国 07:38:42

澳大利亚 16:38:42

在网页中嵌入非系统自带字体,虽然技术上能实现,但是对国内来说,没有太大的实际意义,因为一个中文体文件起码20M+,而且各个浏览器支持的字体文件还都不一样,也就是说,在服务器端必须有2-3个不同格式的字体文件,用来应付各个浏览器,可以看下下面这张对应图。

以为之前做的这个小研究对以后的工作不会用到,谁知还真的用到了。有个客户要求显示时间,但时间的字体必须是电子表的那种字体。

首先,我们要找到这个字体,因为这个字体只有ttf格式的,所以我们需要转换出其他各种不同的格式,至于如何转换,有软件,有在线,我在这就不指明一定要使用哪种了。

转换好后,就可以编写css代码了:

@font-face {
    font-family: ‘hooray‘;  /*给自定义字体命名*/
    src: url(‘hooray.eot‘);
    src: url(‘hooray.eot?#iefix‘) format(‘eot‘),
         url(‘hooray.woff‘) format(‘woff‘),
         url(‘hooray.ttf‘) format(‘truetype‘),
         url(‘hooray.svg#webfontjKg17VrE‘) format(‘svg‘);
}

至于调用,和常规的一样,在需要的地方定义font-family,并且字体名称就是刚才命名好的名称就行:font-family: ‘hooray‘;

两个在线字体转换的网站,FontsQuirrel、onlinefontconverter。

时间: 2024-10-07 21:54:33

如何在网页使用自定义的字体的相关文章

网页嵌入自定义字体方法

@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中.经常地,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计.美工设计师最常做的办法是把想要的文字做成图片,这样做有几个明显缺陷:1. 不可能大范围的使用该字体:2. 图片内容相对使用文字不易修改:3. 不利于网站SEO(主流搜索引擎不会将图片alt内容作为判断网页内容相关性的有效因素).网络上有一些使用sIFR技术.或javascrip

网页中导入特殊字体@font-face属性详解

@font-face { font-family: 'icomoon';/*自定义字体名称*/ src:url('../fonts/icomoon.eot?rretjt');/*自定义字体的路径*/ src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'), url('../fonts/icomoon.woff?rretjt') format('woff'),/*format为字体格式 便于浏览器识别*/ u

Font Awesome 4.0.3 提供了369个网页常用的矢量字体图标

Font Awesome 为您提供了一套可缩放的字体矢量图标,可以快速自定义图标的大小,颜色,阴影,这些都可以通过CSS来实现,无需任何的JS代码哦. 一,主要特点如下: 1,一个字体,369个图标 2,无需要使用JavaScript 3,通过CSS自定义图标的大小,颜色,阴影 4,用户界面友好 5,支持 Internet Explorer 7 浏览器 6,能够在 Retina 屏幕完美呈现 7,和其它图标字体不同,兼容屏幕阅读器 8,可扩展性强 9,文档完善 10,免费 二,图标类型下面简单罗

Qt:使用自定义的字体

Qt:使用自定义的字体 1. 下载字体文件 2. 加载字体文件 3. 使用字体 QFontDatabase::addApplicationFont("XENOTRON.TTF"); ui->toolButton_2->setFont(QFont("XENOTRON", 34)); http://www.cppblog.com/biao/archive/2012/01/01/163345.html

@font-face(css3属性)实现在网页中嵌入任意字体

@font-face语法规则 @font-face { font-family: <YourWebFontName>; src: <source> [<format>][,<source> [<format>]]*; [font-weight: <weight>]; [font-style: <style>]; } 说明: YourWebFontName:此值指的就是你自定义的字体名称,最好是使用你下载的默认字体,他将被引

详解CSS网页布局中默认字体样式

浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做法. 拿字体来说,各个浏览器默认的字体种类.字体大小和字体行高都不一样,比如IE8的中文版在Windows XP下显示网页时默认字体是宋体,而英文版肯定不会如此.所以我们需要统一设置默认的字体样式,以便实现一致的显示效果来保证设计的一致性和提高开发效率. 样

iOS上使用自定义ttf字体

项目中想使用第三方的字体,在stackoverflow上查询解决办法,也折腾一会,添加成功,示例如下: 1.将xx.ttf字体库加入工程里面 2.在工程的xx-Info.plist文件中新添加一行Fonts provided by application,加上字体库的名称 3.引用字体库的名称,设置字体: [UIFontfontWithName:@"fontname" size:24]; UILabel *label = [[UILabel alloc] initWithFrame:C

QtCreator的一些自定义代码字体和颜色

QtCreator的一些自定义代码字体和颜色 一.配色方案: 配置方法:工具->选项->文本编辑器->配色方案 如果对这些QtCreator自带的配色方案不满意,则需要手动进行添加 方法:这些配色方案是以xml文件的形式存在于 %QtCreatorDir%\share\qtcreator\styles\ 中. <?xml version="1.0" encoding="UTF-8"?> <style-scheme version=

css网页使用自定义字体方法

@font-face可以加载服务器端的字体到浏览器端,这样设计师就可以不受客户端字体库的限制. 一般来说有四种格式的字体文件即可覆盖所有浏览器.这四种格式为: .EOT:适用于Internet Explorer 4.0+. .TTF或.OTF:适用于Firefox 3.5.Safari.Opera. .SVG:适用于Chrome.IPhone. .WOFF:转为web字体指定的字体格式标准,被新版本浏览器广泛支持. 语法+举例:在css中如下写 @font-face { font-family: