css自定义字体

@font-face {
font-family: 华文隶书;
src: url( ../font/STLITI.eot ); /* IE */
src: url( ../font/STLITI.ttf ) format("truetype"); /* 非IE */
}

#nav{width:30px;height:537px;display:block;font-size:18px;text-align:center;margin-left:10px;font-family:"华文隶书";padding-top:0;margin-top:-13px;}

常常看到别人这样声明自定义字体:

@font-face {
font-family: ‘fontNameRegular‘;
src:
url(‘fontName.eot‘);
src: local(‘fontName
Regular‘),
local(‘fontName‘),
url(‘fontName.woff‘)
format(‘woff‘),
url(‘fontName.ttf‘)
format(‘truetype‘),
url(‘fontName.svg#fontName‘) format(‘svg‘);
}

@font-face {
font-family: 字体名称;
src: url( 字体.eot ); /* IE
*/
src: url( 字体.ttf ) format("truetype"); /* 非IE */
}

时间: 2024-12-22 20:29:28

css自定义字体的相关文章

[转] css自定义字体font-face的兼容和使用

@Font-face目前浏览器的兼容性: Webkit/Safari(3.2+) TrueType/OpenType TT (.ttf) .OpenType PS (.otf): Opera (10+) TrueType/OpenType TT (.ttf) . OpenType PS (.otf) . SVG (.svg): Internet Explorer 自ie4开始,支持EOT格式的字体文件:ie9支持WOFF: Firefox(3.5+) TrueType/OpenType TT (

css自定义字体完美解决方案example

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>fontface</title> 6 <style type="text/css"> 7 8 /*完美解决css3 web-safe字体各种浏览器兼容问题*/ 9 @font-face { 10 font-

HTML5 Canvas绘文本动画(使用CSS自定义字体)

一.HTML代码: <!DOCTYPE html> <html> <head> <title>Matrix Text - HTML5 Canvas Demo</title> <script type="text/javascript" src="matrixtext.js"></script> <style> @font-face { font-family: 'Matr

HTML中用自定义字体实现小图标icon(不是原作, 只是一个研究笔记)

最近在做一个项目时, 研究了一下新浪微博的前端, 看到首页中那个图标了吗, 以前看到这类效果的第一反应就是用一个gif之类的图标做出来!! 但在研究的过程, 发现了一个小技巧, 注意那个em标签中的文本是E, 但显示出来一个类似ICON的图标. 既然是HTML+CSS写出来的, 那么应该是由css控制显示出来的效果的. 其他的一些css基本没什么问题, 都理解了, 但只有这个 font-family, 强制设置成了 "wbficonregular", 一般操作系统里应该没这个命名的字体

css3 自定义字体的使用方法

@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能支持吗?当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶.我的Blog就使用了许多这样的自定义Web字体,比如说首页的Logo,Tags以及页面中的手写英文体,很多朋友问我如何使用,能让自己的页面也支持这样的自定义字体,一句话这些都是@fo

CSS3 使用自定义字体

CSS3 @font-face 规则 在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体.通过 CSS3,web 设计师可以使用他们喜欢的任意字体.当您您找到或购买到希望使用的字体时,可将该字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上.您“自己的”的字体是在 CSS3 @font-face 规则中定义的. Firefox.Chrome.Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenTyp

01_MUI之Boilerplate中:HTML5示例,动态组件,自定义字体示例,自定义字体示例,图标字体示例

?? 1安装HBuilder5.0.0,安装后的界面截图如下: 2 按照https://www.muicss.com/docs/v1/css-js/boilerplate-html中的说明,创建上图的Boilerplate.html: 3 代码内容如下: <!-- 作者:[email protected] 时间:2015-08-02 描述:使用MUI,您可以先简单地直接将以下CSS和JS加入到您的HTML文档中: <link href="//cdn.muicss.com/mui-0.

字蛛 自定义字体

可能 网站中会用到一些漂亮的文字,又不想用图片, 这样可以用自定义字体, 用的工具是 字蛛http://font-spider.org/ 字蛛工具 依赖 nodeJs, 先安装好 NodeJS,然后执行安装字蛛: npm install font-spider -g 字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式. 以下都是必须的,字蛛生成的字体是文件中有的文字,第一步 声明@font-fac

CSS3自定义字体.

终于看完了<响应式WEB设计:HTML5+CSS3实战>这个书啦,那个高兴. 看完后学了一些东西,在这里记一下如何用CSS3实现自定义的字体效果. 首先去下载些自己想要的字体,放在文件目录下面. 1:在Css中用@font-face定义字体 1 @font-face{ 2 font-family:'myfont'; //你想给你的自定义的文字起一个什么样的名称[请自便] 3 src:url(./yizhuifangxiu.ttf);//你自定义文字文件的路径 4 font-weight:700