CSS引入外部字体

如何引入外部字体呢?
1.获取相关文件
通常我们在网站下载到的字体包都是以TTF结尾的文件,但是我们前端开发时通常需要四种文件。
字体后缀和浏览器有关,如下所示

  • .TTF或.OTF,适用于Firefox 3.5、Safari、Opera
  • .EOT,适用于Internet Explorer 4.0+
  • .SVG,适用于Chrome、IPhone
    那我们如何获得这四种文件呢?这里推荐一个线上字体转换软件,地址如下:
    https://www.fontsquirrel.com/tools/webfont-generator
    2.引入外部文件
    @font-face {
    font-family: ‘HansHandItalic‘;
    src: url(‘fonts/hanshand-webfont.eot‘);
    src: url(‘fonts/hanshand-webfont.eot?#iefix‘) format(‘embedded-opentype‘),
         url(‘fonts/hanshand-webfont.woff‘) format(‘woff‘),
         url(‘fonts/hanshand-webfont.ttf‘) format(‘truetype‘),
         url(‘fonts/hanshand-webfont.svg#webfont34M5alKg‘) format(‘svg‘);
    font-weight: normal;
    font-style: normal;
    }

    3.使用字体

    body{
    font-family: ‘YaHei Consolas Hybrid‘;
    font-size: 16px;
    }

原文地址:http://blog.51cto.com/9886022/2093725

时间: 2024-11-09 03:07:44

CSS引入外部字体的相关文章

canvas引入外部字体无效解决方法

1.css文件中引入外部字体 @font-face { font-family: 'hwhp'; src: url('../font/hwhp.ttf') format('truetype'), url('../font/hwhp.eot'), url('../font/hwhp.woff') format('woff'), url('../font/hwhp.svg') format('svg'); } canvas设置字体样式 var wm = document.createElement(

引入外部字体文件进行设置

在/src/main/下创建assets文件夹,在assets文件夹下创建fonts文件夹,并把ttf文件放入fonts文件夹中 textView.setTypeface(Typeface.createFromAsset(getAssets(),"fonts/YaHei.Consolas.1.12.ttf"));

html页面,css引用外部字体

@font-face { font-family: 'Tw'; src: url('../fonts/Tw.eot'); src: url('../fonts/Tw.eot?#iefix') format('embedded-opentype'), url('../fonts/Tw.woff') format('woff'), url('../fonts/Tw.ttf') format('truetype'), url('../fonts/Tw.svg#Tw') format('svg'); f

如何引入外部font文字

1.首先在电脑上找到想要引入的外部字体然后下载font文字,以.ttf结尾的 2.将以.ttf结尾的字体,放到自己项目的font文件夹下面 3.在css里面引入外部字体 @font-face{ font-family: 'Open Sans';//文字名称(文字名称,将.ttf用记事本打开就能看到,通常是第一行:) src : url('../font/OpenSans-Regular.ttf');//路径 } 4.最后使用外部文字,如:a {font-family:'Open Sans'}

CSS样式中字体和大小

1.css中引入外部字体文件: @font-face 被列为了 CSS3 的一项新特性,其实它并不是什么新鲜技术,它最早出现在 CSS2 的规范定义中,但是在 CSS2.1 中又被删除,现在被正式列入 CSS3.目前主流的浏览器(IE 4+/Firefox 3.5+/Chrome 1+/Safari 3.1+/Opera 10+)都能够支持这个属性,所以不用担心会有浏览器兼容性问题. @font-face 允许您在网页中使用电脑中没有安装的字体,完全摆脱安全字体的限制.只需将字体包安装在服务器上

CSS在线字体库,外部字体的引用方法@font-face

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

<link>和@import url()引入外部css文件的区别

<link>和@import url()引入外部css文件的区别:标题中的两种方式都可以引入外部css文件,关于它们的基本用法这里就不多介绍了,具体可以参阅相关阅读.相关阅读:(1).<link>标签可以参阅HTML的<link>标签一章节.(2)[email protected] url()可以参阅css的@import url用法简单介绍一章节.下面介绍一下这两者的比较明显的区别.(1).加载机制不同,link方式是首先加载完css文件,然后再加载页面,而@impo

【html】【2】html引入外部文件js css

1>引入js 我们只是写了简单必须的html标签,从未给标签添加点击事件,这次页面添加事件. >写入html页面,可以在<head>标签内  也可以在<body>标签内 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>小娜娜</title> 5 <script type="text/javascript"> 6 document.writ

jsp、css中引入外部资源相对路径的问题

在jsp页面中添加base,可用相对路径: <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> 然后在<head>标签内添加base <base