<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>在网页中嵌入任意字体的完整解决方案 - 51flash.cn</title>
<link rel="stylesheet" href="style.css" />
<style type="text/css">
@font-face {
font-family: 'hakuyoxingshu7000Regular';
src: url('7000.eot');
src: local('hakuyoxingshu7000 Regular'), local('hakuyoxingshu7000'), url('7000.ttf') format('truetype'), url('7000.svg#hakuyoxingshu7000') format('svg');
}
#poem{
font-size:45px;
font-family:hakuyoxingshu7000Regular;
text-align:center;
}
#poem p{height:30px;line-height:30px;}
</style>
</head>
<body>
<div id="poem">
<h3>云为素食</h3>
<p>京城有同窗，相约素食阁。</p><p>听者犹未尽，言者语已多。</p><p>满座皆友朋，畅谈何民科。</p><p>禅中寄小语，慎言且柔和。</p>
</div>
</body>
</html>
以上代码中“7000”为字体名称。
这种写法貌似是需要字体的3种格式；
而这3种格式分别兼容不同浏览器
.TTF或.OTF，适用于Firefox 3.5、Safari、Opera
.EOT，适用于Internet Explorer 4.0+
.SVG，适用于Chrome、IPhone。
webcelement
- 浏览: 38599 次
- 性别:
- 来自: 天津
-
最新评论
分享到：
发表评论
-
我的CSS框架-base.css
2015-04-13 10:19 558@charset "utf-8"; /*! ... -
HTML中自定义字体
2014-05-22 11:03 918@font-face { font-family:trebu ... -
兼容新处理要点
2013-09-16 13:59 589兼容性处理要点 1、DOCTYPE 影响 CSS 处理 ... -
css属性之display:inline-block
2013-01-06 11:14 816引用: 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁 ... -
dl dt dd
2012-12-28 11:03 696dl:definition list dt:definitio ... -
内联元素加上浮动就变成了块级元素
2012-11-20 10:19 859内联元素加上浮动就变成了块级元素 -
三像素文本漫溢
2012-11-20 10:14 760三像素文本慢移：如果无名线框（包含内联内容的框）邻近某个浮动， ... -
网页背景从上到下的渐变
2012-10-31 16:30 898<body leftmargin="0&quo ... -
加入收藏
2012-10-31 16:23 984<Script Language="Jav ... -
HTML文件HEAD内部标记浅析
2012-10-31 16:15 728今天，使用各种所见即 ... -
半透明图层
2012-10-31 16:11 650<style type="text/css&q ... -
表格边框为1像素自定义颜色
2012-10-31 15:03 1216table{ border:1px solid #94919 ... -
爱恨原则
2012-07-12 09:06 897【经验】在CSS中定义a:link、a:visited、 ... -
兼容所有浏览器的圆角
2012-07-06 13:39 703<!DOCTYPE HTML> <html& ... -
css行内文本超出指定宽度溢出的处理
2012-03-28 14:53 1431一般文字截断： .text-overflow{ ... -
识别IE6的代码
2012-03-13 14:40 652将要在IE6里显示的内容和样式写在<!--[if lte ... -
理解绝对定位和相对定位
2012-03-13 11:10 559概要：本文主要描述XHTML中相对定位和绝对定位各自的本质、 ... -
Javascript中最常用的55个经典技巧
2012-03-08 16:53 6661. oncontextmenu="window. ... -
按钮鼠标悬停时手势
2012-03-08 16:11 1046<button name="submit&qu ... -
点此打印代码
2012-03-07 15:32 682<!DOCTYPE html PUBLIC " ...
相关推荐
这个过程涉及到的技术主要包括SVG图标、Web字体技术以及CSS3的调用方法。以下是关于这个主题的详细说明。 首先，SVG（Scalable Vector Graphics）是一种基于XML的矢量图像格式，它可以无损地缩放，且文件体积小，...
CSS 调用外部特殊字体 在网页设计中，字体的选择是非常重要的一部分。通常，我们希望在网页中使用某一特定字体，但是该字体并非主流操作系统的内置字体。这时，我们可以借助外部的定义属性来实现。下面将详细讲解...
在网页设计中，根据屏幕分辨率调用不同的CSS（Cascading Style Sheets）是实现响应式设计的关键技术。响应式设计允许网页内容根据用户设备的屏幕尺寸和方向自动调整布局、图片大小以及字体等元素，从而提供优秀的...
CSS通过指定颜色、字体、布局、背景和其他视觉效果，可以精确控制网页的呈现方式。 在CSS中，有三种主要的调用方式： 1. **行内样式**：这是最直接的方式，将CSS样式直接写在HTML元素的`style`属性内。例如： ```...
为了更深入理解CSS字体属性，我们可以探讨以下几个关键点： 1. `font-family`: 用于定义元素的字体系列。多个字体名之间用逗号分隔，浏览器会按顺序尝试加载，直到找到可用的字体。 2. `font-size`: 定义字体大小...
综上所述，调用字体时需要考虑操作系统的差异，利用CSS的`font-family`属性创建字体备用列表，并确保在所有目标平台上进行充分的测试，以保证字体显示的一致性和兼容性。这对于提供良好的用户体验至关重要。
总的来说，`@font-face`是CSS提供的一种强大功能，它让网页设计者可以自由地使用服务器端字体，从而提升网页的视觉效果。不过，在使用过程中，需要注意版权问题、跨浏览器兼容性和文件大小优化，以确保最佳的用户...
在网页设计中，CSS（Cascading Style Sheets）是用于控制网页元素样式的重要工具，其中`font-family`属性用于指定元素内文本所使用的字体。在处理多语言网站时，特别是包含英文和中文的情况下，可能需要为不同的语言...
在网页设计中，CSS（层叠样式表）是用于控制网页元素样式的核心技术之一，包括字体、布局、颜色等。本文将深入探讨如何使用CSS设置背景颜色，以创建丰富的视觉效果。 1. 背景颜色的基本语法 在CSS中，设置背景颜色...
CSS（层叠样式表）用于定义用户界面的视觉样式，如颜色、字体、布局等。在Unigui中，我们可以使用TUniWebBrowser组件来显示HTML内容，而这个组件支持加载外部CSS文件。我们可以通过修改TUniWebBrowser的Source属性，...
《jx09HOME页CSS+DIV版详细调用说明》 在网页设计领域，CSS（Cascading Style Sheets）和HTML（Hypertext Markup Language）的结合使用是构建美观、响应式页面的基础。本说明将详细介绍如何在“jx09HOME”页面中...
### 字体调用（@font-face） 在Prezi的CSS编辑器中，@font-face规则允许我们定义并使用自定义字体。Prezi自版本4.6.0起开始采用Keg文件格式封装字体，因此只支持Keg字体文件。用户可以通过引用`.keg`文件来加载特定...
这个CSS文件通常包含一系列规则，用于定义`.emoji`类下的每个表情代码对应的背景图像或者字体图标。微信emoji的实现通常依赖于两种方法： 1. **背景图像**：CSS可以使用`background-image`属性为每个表情指定一个...
- **通过CSS文件调用**：将CSS代码写入单独的文件，然后在HTML中使用`<link>`标签引用，如`<link href="css/style.css" rel="stylesheet" type="text/css">`。 **CSS的各类属性和值** 1. **字体属性**： - `font...
·1.5 分类及其它技巧·1.6 串接·1.7 关于浏览器的坏消息 ·1.8 第1日复习第2日·2.1 第2日 ·2.2 按照字体名称调用字体·2.3 对字号的控制 ·2.4 加重显示和斜体字的所有方式·2.5 文字的特殊效 资源太大，传百度...
通过引入其CSS文件并利用类名调用图标，开发者可以轻松地将各种图标整合到自己的网页设计中，同时还能利用CSS3的特性来实现更多的定制化效果。在当前的Web开发环境中，Font Awesome已经成为了一个不可或缺的工具，...
CSS字体属性 用于定义字体系列、大小、粗细和文字样式（如斜体）。 1. 字体系列:p { font-family:"微软雅黑"；} div {font-family:Arial,"Microsoft Yahei","微软雅黑"；} body {font-family:'Microsoft Yahei',...
1. `style.css`: 这是CSS样式表，定义了分页控件的外观，如颜色、字体、边距等。通过调整CSS，你可以自定义分页栏的样式，使其符合网站的整体设计。 2. `paging.asp`: 这可能是主分页脚本，包含了实现分页逻辑的ASP...
#### CSS的调用 - **调用样式表的方法**：内联样式、内部样式表、外部样式表。 - **应用样式的优先级**：浏览器按照一定的优先级规则决定最终应用的样式。 #### 网页头部实例 - 实际示例展示如何构造一个完整的...