网页图片如何在线快配文字

图片是网页美化不可或缺的一种元素，有时作为片段文的载体(即将文字P在图片上)可大大提高文字阅读的体验。

在图片上配文字。你一定会最先想到Photoshop，没错，这是一个很强大的工具。但如果每次图片上的文字需要改变怎么办？好办，把原始图片找出来，重新用Photoshop处理，完成后上传替换原图。

有没有更简单易的方法?最好是一劳永逸(一次设计，后面文字再怎么改变都会自动应用样式)。 有的，在图片上面加文字层(DIV)…

如果是特殊字体呢（非宋体或微软雅黑)?也可以实现吗。在图片上应用任意字体，文字内容随意改变不需要再次处理。

下面介绍一种超炫的方法：web font，可以完美解决这个问题。

>什么是web font

web font是把一个放在网络上的字体文件嵌入到当前网页上，客户端浏览该网页时字体显示效果就像本机安装了的效果一样。

通过嵌入字体来使特殊字体在网页上也能正常显示，不用Photoshop处理成图片。并且文字内容有变动字体也能自动适应。（因此文字内容改变不需要重新P图了）

web font靠CSS中的@font-face语句来实现的,通常认为web font是CSS3中的一个模块，其实早在CSS2中就已经有了，连老古董IE6甚至IE4都支持。其他各种浏览器包括手机浏览器也都完美支持(如IE、360、搜狗、火狐、chrome、safari、Opera等)。

所以，任何浏览器都能识别@font-face，自动会将@font-face所引用的字体效果渲染到指定位置，所以在网上使用你大可放心其稳定性。

>@font-face语句规则

主流浏览器都能很好地支持@font-face，但对于嵌入的字体文件的识别，却是各有各的喜好。

所以在写@font-face语句之前，需要获取要使用字体的四种文件格式，确保能在主流浏览器中都能正常显示该字体。

.TTF或.OTF，适用于Firefox 、Safari、Opera

.EOT，适用于Internet Explorer 4.0+

.SVG，适用于Chrome、IPhone

.WOFF 知用于Chrome、Firefox

四种格式的文件准备好以后，就可以写@font-face语句了，格式如下：

@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');

}

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

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

h1{font-family: fontNameRegular}

>@font-face实现-英文

英文字体实现@font-face的方法比较成熟，有时候看老外的个人技术博客，经常能遇到。做法相对中文简单很多，我们在手头上（或在设计资源站点已经找到）有该字体的某种格式文件，最常见的是.TTF文件，我们需要通过这种文件格式转换为其余三种文件格式。字体文件格式的转换可以通过网站FontsQuirrel或codeandmore提供的在线字体转换服务获取。

>@font-face实现-中文

@font-face是老外发明的，所以他们从来没想过中文的情况，中文一套字体一般要3-6M这样的庞然大物嵌入网页上，结果可想而知，在页面加载完成前已经被关掉了。

当然，不是说中文就无法通过@font-face实现嵌入，但需要再麻烦一步：按需截取（根据文章所涉及到的文字生成小字库），如此便能最大程度地节约流量，将字体减到最小。

日本人发明一种方法:页面加入一段javascript代码,每次页面打开时javascript会适时获取指定的标签上的文字，然后发送到字体平台，字体平台自动根据文字截取小字库发送到浏览客户端面嵌入。这样页面文字随时有改动，平台都能随时生成新的字体文件。

在这里推荐一个中文的web font服务平台"有字库"(www.youziku.com)。该网站提供这种javascript截取字体的服务，亲可以去测试一下。

>@font-face效果

我做过相关测试，效果非常漂亮。

因为是截取成小字库，所以字体文件很小（比图片还小），页面打开速度非常快。

最重要的是，我的网站是动态网站，图片上的文字是被后面数据控制的，经常会有变动，如果文字每次改动我都要重新提交图片，一定累死，并且还无法知道文字什么时候改动。

应用web font服务以后我就完全可以放手了，图片上的文字再也不用我多费心了，效果犹如photoshop处理出来的一样。

用户类似问题：

问题1：想在网页上复制图片和文字

网上的文章，再加上一套，人们不要复制，要复制，该怎么办，是一种尝试。 第一，保存网页，然后复制 二，鉴于 - 源代码 - 见 所需的文本，就是知道浏览器禁用脚本 “确定”按钮，选择您更改浏览器，按Ctrl + C复制，然后打开记事本，按Ctrl + V粘... >>详细

问题2：请问怎么样在制作网页时在图片上添加文字？？

这个只能用div层来解决了，你需要用到层的left，top以及position属性吧文字层定位到图片层上面，只给你提个具体思路 >>详细

问题3：在网页中，怎么给图片添加文字

把图片定义为背景或者写入CSS样式表中，然后就可以在上面布局文字了。 >>详细

问题4：网页中图片如何设置文字围绕?

首先，发表一篇文章，在文章发表框中输入好文字内容。先输入好文字在文章中适当部位插入一张图片，注意，图片的大小不要太大，文章的宽度是480像素，最好要小于这个数值。插入图片勾寻显示源代码”勾选框，编辑插入图片的代码，在标签中的最后加... >>详细

问题5：在HTML文档中编辑网页,如何在图片上键入文字?

先在 之间插入标题,然后在 中插入用于定位网页的表格代码为 插入网页内容,而每个表格都有行和列代码分别是 和 。说到最后插入的方式都是从它们的中间进行插入。本人只是说的只是大体的设计模块,例如详情代码你兴趣的话放几本有关WEB编程的书仔细... >>详细