给自己的网页加字体

ShylaDong 2020-07-29

1.前言

在网页设计中，除了serif, sans-serif 等font family，如果想加入自己的字体，怎么办？答案就是在css中加入  @font-face 属性。下面简述其步骤。

2.步骤

（1）找到某字体：

给自己的网页加字体

从网上找到两个字体，放入a 文件夹下，命名为‘b.otf‘。

（2）在css中加入 @font-face属性，并 对body赋予该字体：

给自己的网页加字体

在@font-face中，font-family设定了字体的名字，src:给定了字体的位置，这样，就算客户端浏览器没有该字体，也可以正确的以这个字体进行显示。

其中，测试html是这样：

给自己的网页加字体

（3）打开测试网页，发现已经赋予成功：

 给自己的网页加字体

ShylaDong

ShylaDong

相关推荐

微信小程序rich-text中的nodes属性

获取的html标签字符串.replace

88467711 / 0评论 2020-07-26

通过text-indent:-9999px 将字体隐藏问题

有时候在浏览一个网站时，点击导航栏的logo就能跳转到首页，通常这是用的a标签来链接，分析网页源码会发现a标签之间有文字内容，但是网页上却没有显示出来，看了下css样式中有一个｛text-indent:-9999px｝，这个声明就是将字体隐藏了。一般网页为

haolt00 / 0评论 2020-07-04

Android 开发学习进程0.17 Android资源文件selector textview显示两种不同字体

selector 是安卓资源文件的一种，它可以使按钮等实现不同状态下的不同UI，不用在代码中实现，而使用方式有两种，一种在color文件下 创建.xml可以使按钮等字体在不同状态下的变化，其二是在drawable中创建资源文件，可以设置背景等，下面的<

ShylaDong / 0评论 2020-06-29

常用字体

例1：font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;例2：font: 12px/1.5 Tahoma,

82437702 / 0评论 2020-04-22

web前端入门到实战：常见CSS3选择器和文本字体样式汇总

常见的CSS3选择器包含：常用基本、属性、伪类、层级（组合）选择器，具体使用情况建议先阅读[css选择器四大类：基本、组合、属性、伪类]对于选择器的使用有一个基本了解，选择器的作用在于通过它找到元素，并且给它添加属性样式。专门建立的学习Q-q-u-n： 7

WinerChopin / 0评论 2020-04-18

demo06-字体标签

color,size,face是字体标签的属性。躺在病床上的时候,<br />. 拯救你<font size="7"></font>生命的不一定是大夫,<br />. 也绝对不是你每天花天

88467711 / 0评论 2020-03-28

炫酷的字体效果

<!DOCTYPE html>. padding: 0;margin: 0;width: 100vh;height: 100vh;display: flex;justify-content: center;align-items: center

ShylaDong / 0评论 2020-02-25

移动端布局，字体使用rem不生效问题

移动端布局是最让我感到头疼的一件事，一直都是逃避的心态，不想面对，但没办法，公司前端就我一个人，所有的问题迟早都要自己解决，所以不得不开始摸索，最快的办法就是看前辈们都是怎么解决的，但是有些办法不一定适合自己，要挨个试，才知道哪个方法好用，这次我就来记录一

haolt00 / 0评论 2020-02-23

CSS的字体样式

首选介绍一个约定俗成的东西：span标签。一般将想要突出的东西，比较重要的东西，用span标签括起来。比如，”学习Java“这几个字，想突出Java，就用<span>和</span>标签把Java括起来，然后在用CSS的比如id标签

冰蝶 / 0评论 2020-02-22

css字体样式+文本样式

font-family: "微软雅黑","宋体","黑体",sans-serif;text-align 只对块级元素有效：可以在元素外嵌套块级元素，给外元素添加text-align属性。可以用在图

尚衍亮 / 0评论 2020-01-31

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

最重要的一步，html文件中需要预先使用字体样式，尽量放在body下面第一个元素，元素必须可见。

haolt00 / 0评论 2019-12-31

解决HTML5手机端字体小的问题

<!

pythonclass / 0评论 2019-12-30

CSS 字体

CSS字体属性定义字体，加粗，大小，文字样式。font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。对于较常用的字体组合，看看我们的Web安全字体组合。em的尺寸单位由W3

somboy / 0评论 2019-11-10

web前端——CSS 10 文本属性和字体属性

介绍几个常用的。text-align 属性规定元素中的文本的水平对齐方式。line-height就是行高的意思，指的就是一行的高度。text-shadow：水平方向偏移量 垂直方向偏移量 模糊度 阴影颜色；font-size表示设置字体大小，如果设置成in

wangjie / 0评论 2019-10-23

HTML连载43-还原字体和字号、文字界面

--这里还复习了条目的表示方法及其快捷键：ul>li*5再加tab-->

82437702 / 0评论 2019-10-21

谷歌字体（Google Font）初探 [翻译自Google官方文档]

你不需要任何的编码,你所要做的只是添加一个特定的CSS到HTML页面上，然后把字体关联到这个CSS样式。一个快速的例子：这是一个例子，复制下面的HTML代码到一个文件中：。用一个现代浏览器打开这个HTML文件，你就可以看到页面显示如下，用了一个叫做“Tan

冰蝶 / 0评论 2014-06-26

设置文字的字体

font-family: 微软雅黑,黑体,宋体;说明：2em表示缩进两个中文文字。说明：字体默认行高为1.2，表示字体的行高是字体高度的1.5倍。.greenBorder {border: 1px solid green;} /* just borders

86251940 / 0评论 2017-02-18

怎么修改placeholder字体的css样式

修改palceholder内文字的css样式::-webkit-input-placeholder{ color: red; font-size: 20px; line-height: 50px;}修改class名为test1的元素palceholder内

wcssdu / 0评论 2017-11-01

一种不完美的网页字体异步加载方法

最近在做一个项目时，遇到了这样一个问题：网页大标题要用设计师指定的中文字体，该字体文件比较大，浏览器加载字体文件的过程中是不会显示使用该字体的文本的，于是出现了初次打开网页时有一段时间“No title”的BUG。把文字做成png图片，或改为路径后做成SV

87241641 / 0评论 2019-07-30

html5中的自适应字体

在进行移动端页面的开发的时候，屏幕适配是很大的难题。在某些时候也会遇到字体的适配的问题。方案二：使用viewport来实现，css3提供了vw，vh，vim等与viewport相关的单位。案例如下：box2中的字体大小会根据屏幕的大小实时缩放。#box {

loverlucky / 0评论 2016-02-24

UITextView显示HTML内容，实现显示不同的字体和文字颜色

<html>. <head>. </head>. <body>. 这是文字。<br/><br/>. </body>. </html>

hb / 0评论 2011-08-25

px rem区别

em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值。rem：相对单位，可理解为”rootem”,相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9

86251940 / 0评论 2019-06-14

一次搞懂CSS字体单位：px、em、rem和%

对于绘图和印刷而言，“单位”相当重要，然而在网页排版里，单位也是同样具有重要性，在CSS3普及以来，更支持了一些方便好用的单位（px、em、rem…等），这篇文章将整理这些常用的CSS单位，也帮助自己未来在使用上能更加得心应手。“网页”和“印刷”的单位若要

切慕溪水 / 0评论 2019-07-01

android 中文字体向上偏移解决方案

为了解决这个问题，尝试了很多方法，最后使用以下解决方案。列如，一个span的font-size和line-height都设置为16px，在调试时，元素的高度确实是16px，但是，中文的高度看起来并不止16px，而且显示的位置明显超出了元素的尺寸范围，向上偏

88457415 / 0评论 2019-06-30

CSS font-style斜体字体倾斜体样式

对于没有斜体变量的特殊字体，将应用oblique. 让对象盒子里的文字字体为斜体，可以对对应盒子加css样式font-style:italic即可实现对象内文字字体为斜体。同时我们案例也演示了使用CSS去掉斜体样式，使用CSS font-style:nor

yezi / 0评论 2019-06-29

如何在项目中使用icon-font 图标字体

icon-font 图标字体的使用，选择好需要的图标后点击右下角的Generate Font生成图标，生成后download下来，下载好的文件会包含fonts文件夹和css文件、demo.html文件，把fonts文件夹和css文件引入到项目中，css文件

88457415 / 0评论 2019-06-29

怎么修改placeholder字体的css样式

修改palceholder内文字的css样式::-webkit-input-placeholder{ color: red; font-size: 20px; line-height: 50px;}修改class名为test1的元素palceholder内

Ydgent / 0评论 2017-11-01

node 字体压缩插件 font-spider

根据甲方要求，使用UI中指定字体移动端默认显示系统默认字体，非系统默认字体需要自行引入字体包字体包过大，字体包通常在几MB，严重拖累页面加载速度分析：。如果页面文本内容需要经常更新如果需要对input表单内容同样应用定制字体请放弃本文章所述方法，可以考虑通

chu0 / 0评论 2019-06-28

css font字体的属性

border-radius:25px; 增加圆角边框vertical-align:middle; 垂直对齐一幅图像;border:1px solid red; 修改边框宽度 ，实线（虚）， 颜色css字体样式是网页中不可或缺的样式属性之一,有了字体样式,我

CoderChang / 0评论 2016-10-10

文本排版之CSS属性

行高line-height的值num可以为百分比数字/由浮点数字和单位标识符组成的长度值，允许为负值。其百分比取值是基于字体的高度尺寸。在CSS布局中一般采用像素px为单位。line-height行高属性，运用到对文字排版，实现上下排文字间隔距离，以及单排

86251940 / 0评论 2016-05-30

css字体样式(Font Style),属性

css字体样式,属性css字体样式是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者必需了解的知识。·当样式规则外已经有""时，用''代替""。

dazhifu / 0评论 2016-04-20

css字体样式

注意：取值范围从数字100~900，浏览器默认的字体粗细为400。另外可以通过参数lighter和bolder使得字体在原有基础上显得更细或更粗些。

SuiKaSan的自学室 / 0评论 2016-01-26

第43章 服务器端字体和@font-face属性

<!doctype html>. @font-face{ font-family:webfont; src:url(font/qtgg.otf);}. @font-face{ font-family:Arial; src:local('Aria

lxpandsq / 0评论 2015-12-09

【零基础入门】 css学习笔记（1） 字体颜色样式等

p ： 选择器，表示将样式应用到哪些元素{} ： 把p元素的所有样式放在大括号之间background-color:red; ：样式的属性:属性值;3， 把css加入html中：1） 在<head>元素中增加样式标记。

realitycss / 0评论 2019-06-27

属性颜色字体变化

司名,音乐,电影...),找到...

88467711 / 0评论 2015-07-01

使用 Google Fonts 为网页添加美观字体

在线字体提供丰富多样的字体样式，能使页面更美观，更具吸引力。Google Fonts 就是一个开源的在线字体库，使用起来简单快速。前言文字是网页中很重要的组成部分。为文字选择一个合适的字体，能够更好的展现一个网站的个性，表达所要传递的信息，同时吸引用户来产

Cosmiccat / 0评论 2015-06-12

HTML中自定义字体

font-family:trebuc;src:url('trebuc/trebuc.woff'),url('trebuc/trebuc.ttf'),url('trebuc/trebuc.eot');/*IE9*/. font-size:12px;font-

86251940 / 0评论 2014-05-22

CSS引入外部字体方法，附可用demo

有时候我们做的页面需要用到一些更好看的字体又不想用图片代替，图片会影响加载速度则使用外部字体来显示但是直接通过font-family又不一定全部都行这就需要我们在css中进行定义并且引入字体文件路径然后再使用外部字体。其中上面的font.cssfontna

清荷叶之家 / 0评论 2019-06-26

深入理解 CSS：字体度量、line-height 和 vertical-align

line-height 和 vertical-align 都是简单的 CSS 属性，以致于大多数人自以为知道这两个属性的工作原理。举例来说，line-height 的值可以是一个长度或者是一个数字，它的默认值是 normal。我们经常将 normal 理解

87241641 / 0评论 2019-06-26

5 Helpful jQuery Tricks（五个有用的jQuery技巧）

在开始之前，我们简单的介绍一下到底什么是jQuery？jQuery是一个优秀的Javascript框架。它是快速的，简洁的，轻量级的js库，使用户能够更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。上

89453862 / 0评论 2013-11-06

[转]JsEclipse插件字体修改

一开始以为在Myeclipse里面设置下就可以，可是发现没有JsEclipse对应的设置项，在工程里面设置，好像不是很灵，经常变回原来的样式。今天终于看腻了，哥怒了，不解决我还不干活了。理下思路，他肯定有个地方设置样式，那个地方负责管理字体。不管三七二十，

84096523 / 0评论 2013-06-27

设计师的春天：中文WebFont解决方案Font-Spider(字蛛)

我们在日常需求中，经常会碰到视觉设计师对某个中文字体效果非常坚持的情况，因为页面是否高大上，字体选择是很重要的一个因素，选择合适的字体可以让页面更优雅。面对这种问题，我们通常以下方式来进行设计还原：。产生的问题制作与维护成本很高。切图繁琐、高清屏适配繁琐、

chu0 / 0评论 2019-06-21

operamasks omGrid 字体显示问题

colModel : [ {header:'编号',name:'id', width:100, align : 'center'},{header:'地区',name:'city', width:250, align : 'left',wrap:tr

linusz / 0评论 2013-03-08

免费图标字体：一套圣诞节相关的图标字体

圣诞节快到了，这里我们给大家分享一套免费的圣诞节主题的图标字体，希望大家能够喜欢！如果你不了解或者不知道该如何使用图标字体，请参考这篇文章： 如何在HTML中使用图标字体- icon font?

86251940 / 0评论 2012-12-10

生成自定义图标字体工具 - Font Custom

网络上有很多漂亮的图标字体，有付费和免费的两种不同类型版本。使用图标字体通常要比使用传统标准图标要灵活的多。然而，它们却有一个非常大的弱点，每个图标字体通常都是一个单一的字体文件，如果要是使用在某一个项目中，即使我们只需要其中部分的图标，仍然需要加载整个文

linusz / 0评论 2012-12-05

IReport导出HTML时页面偏小问题解决

使用Ireport有一段时间，最近发现它的导出格式中HTML格式会比导出EXCEL和PDF格式明显偏小，经过一段时间的研究，发现，同样是18size的字体在Excel和Html显示的时候，HTML小了一点，把HTML的这个18Size的字体粘贴到Excel

88457415 / 0评论 2009-06-05

如何在HTML中使用图标字体 - icon font?

自由的变化大小自由的修改颜色添加阴影效果IE6也可以支持支持图片图标的其它属性，例如，透明度和旋转等等可以添加text-stroke和background-clip:text等属性，只要浏览器支持标签： icon,

linusz / 0评论 2012-08-28

制作图标字体字库

操作步骤1.在图片软件中调整好单独的图标；2.打开FontCreator 新建个字体，定义名称，然后删成需要的样子。道理都一样，先制作svg图标，再由svg生成字体。

linusz / 0评论 2019-06-20

iReport PDF中文无法显示

IREPORT3.76设计报表时将数据字段的字体设置成中文字体，调好格式后编译并运行,并使用JRViewer进行预览一切正常,使用PDF、HTML预览时无任何错误,但中文无法显示.

84096523 / 0评论 2012-05-23