在网页中自带字体的方法

为了让网页更美观、更有个性,我们通常需要在网页中使用一些网上下载下来的字体,因为系统自带的字体可选择的余地早已无法满足人们对审美的要求。

怎么用?用户的电脑又没有安装你期望的那种字体。做成图片是可以,不过不方便修改啊,不能大幅度使用啊,不利于SEO啊,速度也比较慢点啊等等一大堆弊端。怎么办?别急,我们用CSS。CSS有这么一种优秀的功能,就是可以自定义字体。下面正式进入正题:

CSS自定义字体,让你的字体运用随心所欲!

步骤:

1、下载所需字体。字体下载站提供的字体一般为.TTF格式。

2、字体转格式。为了确保在主流浏览器中都能正常显示该字体,需要提供3种字体格式。我们可以拿下载下来的.TTF文件去转换得到另外两种格式的字体。字体文件格式的转换可以通过网站FontsQuirrel或 onlinefontconverter提供的在线字体转换服务获取。

  • .TTF或.OTF 适用于Firefox 3.5、Safari、Opera
  • .EOT 适用于Internet Explorer 4.0+
  • .SVG 适用于Chrome、IPhone

3、使用@font-face定义字体。如果你是在fontsquirrel.com进行的字体转换,那么连定义字体的步骤都可以免了。转换以后他会提供一个下载包,里面包含需要的字体格式和定义好字体样式的CSS文件stylesheet.css,还有一个供查看字体的demo.html文件。把字体和stylesheet.css拷贝到你的CSS文件夹目录里面就可以调用了。如何生成的样式不能满足你的要求,可以自己修改。

4、html里面调用CSS

附: CSS字体声明:

@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’);
}
/*其中fontName替换为你的字体名称*/

在页面中需要的地方使用该字体:

p { font: 13px fontNameRegular, Arial, sans-serif; }
h1{font-family: fontNameRegular}

-------自己实践过的------------------------------------------------------------

<style type="text/css">
@font-face {
font-family: MyCustomFont;
src: url("Qarmic.eot") /* EOT file for IE */
}
@font-face {
font-family: MyCustomFont;
src: url("msyh.ttf") /* TTF file for CSS3 browsers */
}
</style>

.TestClass{ font-family:MyCustomFont;}

-------自己实践过的---------End---------------------------------------------------

时间: 2024-10-02 19:43:26

在网页中自带字体的方法的相关文章

css网页中设置背景图片的方法详解

css网页中设置背景图片的方法详解 在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等 用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {background-color:数值}2,背景图片 {background-image: url(URL)|none}3,背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4,背景固定 {background-attachment

Android中WebView获取网页中标题 ,内容, 图片的方法

如题,在Android中WebView获取网页中标题 ,内容, 图片的方法 首先是获取标题,在new WebChromeClient(){}中重写onReceivedTitle()方法 @Override public void onReceivedTitle(WebView view, String title) { super.onReceivedTitle(view, title); // loge.e("__页面标题__"+title); } 获取内容,是参考的这边的 http

Android 中使用自定义字体的方法

1.Android系统默认支持三种字体,分别为:“sans”, “serif”, “monospace 2.在Android中可以引入其他字体 . <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:Android="http://schemas.android.com/apk/res/android" Android:layout_width="fill

网页中添加下划线的方法汇总及优缺点

本文主要介绍了添加下划线样式的几乎所有方法,并且比较了每一种方法的优缺点.没想到之前一直没有注意的下划线还有这么多玄机奥秘! 本文由 nzbin 翻译,艾凌风 校稿.未经许可,禁止转载! 英文出处:css-tricks.com 发表地址:http://web.jobbole.com/89425/ 有很多种添加下划线样式的方法.可能你还记得< Crafting link underlines on Medium >这篇文章.Medium 并没有尝试特殊的方法,只是想创建一个漂亮的看起来正常的下划

网页中导入特殊字体@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

转载 | 网页中返回顶部代码(多种方法)

1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 <a href="#top" target="_self">返回顶部</a> 方法二:操作scrooll函数用来控制滚动条的位置(第一个参数是水平位置,第二个参数是垂直位置) <a href="javascript:scroll(0,0)">返回顶部</a>

ccs3中icon转换为字体的方法

小图标转换为字体有几大优点 文件小,一般50k以内 避免了加载多个icons,减少了加载次数,有利于页面优化. 兼容性很好,可以随便放大缩小,都能正常显示. 维护起来也很简单,只用找到这个字体文件(比如.ttf文件),修改里面的某个图标即可. 制作方法 首先,用ps或直接用矢量图软件制作单个icon,制作好后保存为ttf格式,如图: faq.ttf 然后,打开字体编辑器,比如FontCreator,新建字体myfonts. 需要添加一个字体,可以右击——>插入,然后“导入图像”,即做好的矢量图片

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

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

django 中自带的加密方法

导入django 自带的加密算法 和flask中的哈希加密有一曲同工之妙.        from django.contrib.auth.hashers import make_password, check_password make_password 用于密码的加密使用 1. 参数1: 需要加密的字符串 2. 参数2: 是否每次都生成不同的加密串,默认为None, 如果给定任意一个字符串, 则表示每次生成相同的加密串. 3. 参数3: 表示加密算法,常见的加密算法如下: ‘pbkdf2_s