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

图片是网页美化不可或缺的一种元素,有时作为片段文的载体(即将文字P在图片上)可大大提高文字阅读的体验。
在图片上配文字。你一定会最先想到Photoshop,没错,这是一个很强大的工具。但如果每次图片上的文字需要改变怎么办?好办,把原始图片找出来,重新用Photoshop处理,完成后上传替换原图。
有没有更简单易的方法?最好是一劳永逸(一次设计,后面文字再怎么改变都会自动应用样式)。    有的,在图片上面加文字层(DIV)…
如果是特殊字体呢(非宋体或微软雅黑)?也可以实现吗。在图片上应用任意字体,文字内容随意改变不需要再次处理。
下面介绍一种超炫的方法:web font,可以完美解决这个问题。

什么是web font

  • 01

    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语句规则

  • 01

    主流浏览器都能很好地支持@font-face,但对于嵌入的字体文件的识别,却是各有各的喜好。 所以在写@font-face语句之前,需要获取要使用字体的四种文件格式,确保能在主流浏览器中都能正常显示该字体。

  • 02

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

  • 03

    .EOT,适用于Internet Explorer 4.0+

  • 04

    .SVG,适用于Chrome、IPhone

  • 05

    .WOFF 知用于Chrome、Firefox

  • 06

    四种格式的文件准备好以后,就可以写@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实现-英文

    • 01

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

      @font-face实现-中文

      • 01

        @font-face是老外发明的,所以他们从来没想过中文的情况,中文一套字体一般要3-6M这样的庞然大物嵌入网页上,结果可想而知,在页面加载完成前已经被关掉了。 当然,不是说中文就无法通过@font-face实现嵌入,但需要再麻烦一步:按需截取(根据文章所涉及到的文字生成小字库),如此便能最大程度地节约流量,将字体减到最小。 日本人发明一种方法:页面加入一段javascript代码,每次页面打开时javascript会适时获取指定的标签上的文字,然后发送到字体平台,字体平台自动根据文字截取小字库发送到浏览客户端面嵌入。这样页面文字随时有改动,平台都能随时生成新的字体文件。 在这里推荐一个中文的web font服务平台"有字库"(www.youziku.com)。该网站提供这种javascript截取字体的服务,亲可以去测试一下。

        @font-face效果

        • 01

          我做过相关测试,效果非常漂亮。 因为是截取成小字库,所以字体文件很小(比图片还小),页面打开速度非常快。 最重要的是,我的网站是动态网站,图片上的文字是被后面数据控制的,经常会有变动,如果文字每次改动我都要重新提交图片,一定累死,并且还无法知道文字什么时候改动。 应用web font服务以后我就完全可以放手了,图片上的文字再也不用我多费心了,效果犹如photoshop处理出来的一样。

        (0)

        相关推荐

        • 微信如何给图片配文字

          微信如何给图片配文字 操作方法 01 打开微信,找到任意一个好友的聊天页面 02 点击底部右侧的加号,展开功能列表选择相册选项 03 进入图片和视频页面,选择你想要配文字的图片 04 点击右下角预览选 ...

        • 微信怎么发布文字内容,怎么发布图片配文字?

          使用了一段时间微信后,发现总是转人家的链接,偶尔也看到有些朋友自己写并且配有照片,就想自己怎么发呢?通过学习也会发了,小高兴一下吧. 操作方法 01 登陆微信后,在下方找到发现,点击发现,再在上面找到 ...

        • 怎么在图片上配文字

          今天小编要和大家分享的是怎么在图片上配文字(本文以苹果手机为例),希望能够帮助到大家. 操作方法 01 首先在我们的手机桌面上找到照片并点击它,如下图所示. 02 然后点击相机胶卷,如下图所示. 03 ...

        • 一键抓取网站图片(在线网页图片提取)

          爬取网页图片,怎么爬取网页图片,大家一看到爬取应该就想到python.但是为了爬取一些数据,花上几个月的时间去学习python编程技术,时间也浪费了还不一定能爬取成功.今天给大家分享一款免费的免费爬取 ...

        • 网页图片加载速度很慢怎么办?

          打开[控制面板],选择[网络和internet]. 然后点击[网络和共享中心]. 选择[更改适配器设置]. 然后找到本地连接右键选择[属性]. 选择[IPv4协议],双击打开,再DNS地方填入8.8. ...

        • 手机美图秀秀怎么配文字?

          平时用手机拍的照片,有的需要修饰下,比如配些俏皮的文字.当然基本上手机自带的照相机就有美化功能,但不那么好用,下载个美化软件会更好.今天小编就跟大家展示下如何用手机美图秀秀给照片配文字. 操作方法 0 ...

        • 如何在线制作中文文字云

          很多小伙伴可能不太清楚如何在线制作中文文字云,其实操作也容易,下面小编就为大家分享一下在线制作中文文字云的方法,有需要的小伙伴快来看看吧~ 操作方法 01 首先进入网站HTTP://YCIYUN.CO ...

        • 为什么网页图片显示不了

          文字,图片,视频等构建了一个丰富多彩的互联网,也使得我们在浏览网页的时候不在那么单调,但是很多朋友在浏览网页的时候可能会遇到网页上的图片无法显示的情况,到底是什么原因导致网页图片无法显示呢,遇到这种情 ...

        • 迅雷网页图片修复工具实现红X图片的修复

          “网页图片修复工具”这个产品名称对于它的作用再直白不过了,看上去它是一个“图片浏览器”,其实它是一个“能看看不了的图片的图片浏览工器。。。。” 使用说明: 1、把鼠标移动到网页中显示不出的图片上,会出 ...