精华内容
下载资源
问答
  • Android WebView 网页使用本地字体

    千次阅读 2019-10-29 15:42:50
    要求在网页里面调用android app中assets目录下的某个字体文件。 网页加载通常有两种方式:...网页中直接使用file://指定assets文件路径即可 示例: font-family: url('file:///android_asset/xxx.TTF') 二、loadUr...

    要求在网页里面调用android app中assets目录下的某个字体文件。

    网页加载通常有两种方式:
    1、loadDataWithBaseURL
    2、loadUrl

    一、loadDataWithBaseURL

    网页中直接使用file://指定assets文件路径即可

    示例:

    font-family: url('file:///android_asset/xxx.TTF')
    

    二、loadUrl

    这种情况网页中不能直接使用file://来指定文件路径,否则会如下错误。

    "Not allowed to load local resource: file:///android_asset/fonts/xxx.TTF"
    

    正确做法:必须通过WebView来拦截。

    1、在网页中指定字体

    font-family: url('/android_asset_font/xxx.TTF')
    

    2、重写WebViewClient 的shouldInterceptRequest方法

    		String INJECTION_TOKEN = "/android_asset_font/";
    
    		@Override
    		public WebResourceResponse shouldInterceptRequest(WebView webView, String url) {
    			if (url != null && url.contains(INJECTION_TOKEN)) {
    				try {
    					String assetPath = url.substring(url.indexOf(INJECTION_TOKEN) + INJECTION_TOKEN.length(), url.length());
    					return new WebResourceResponse(
    							"application/octet-stream",
    							"UTF8", getContext().getAssets().open(assetPath)
    					);
    				} catch (Exception e) {
    					e.printStackTrace();
    				}
    			}
    			return super.shouldInterceptRequest(webView, url);
    		}
    

    参考:
    https://stackoverflow.com/questions/19997146/kitkat-kills-not-allowed-to-load-local-resource-file-android-asset-webkit-a/20992306#20992306

    展开全文
  • 1 打开网址http://cufon.shoqolate.com/generate/将本地字体上传。    点击Let's do this 后会让你下载一个js文件. 2.然后再将另一个js文件下载下来  这样我们就有了两个js文件  3.测试...

    1 打开网址http://cufon.shoqolate.com/generate/将本地字体上传。

     

     

    点击Let's do this 后会让你下载一个js文件.

    2.然后再将另一个js文件下载下来

     

    这样我们就有了两个js文件

     

    3.测试html如下

    <!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" />

    <script type="text/javascript" src="cufon-yui.js"></script>

    <script type="text/javascript" language="javascript" src="Jokerman_400.font.js"></script>

    <style type="text/css">

    *{

    font-size:36px;

    }

    </style>

     

    <script type="text/javascript">

        Cufon.replace(".b");

    </script>

    </head>

    <body>

    <p class="b">

    Aenean ut vulputate lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

    </p>

    <p>

    Aenean ut vulputate lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

    </p>

    </body>

    </html>

    4.效果

    展开全文
  • 网页中如何使用特殊字体, 1. 工具下载地址:http://code.google.com/p/ttf2eot/downloads/detail?name=ttf2eot-0.0.2-2.zip&can=2&q= 2. 将工具解压放到本地根目录。TTF字体文件与本工具放到同一目录下。...
  • 网页使用自定义字体

    2017-05-16 17:24:02
    比如我想在网页中使用某个自定义的字体,首先要把这个字体下载到本地, 在页面中设置一下: @font-face { font-family:XiaoBiaoSong;//字体名字 src: url('__PUBLIC__/font/XBS_GBK.TTF');//ttf的路径 }需要修改...

    比如我想在网页中使用某个自定义的字体,首先要把这个字体下载到本地,

    在页面中设置一下:

    @font-face {
    	font-family:XiaoBiaoSong;//字体名字
    	src: url('__PUBLIC__/font/XBS_GBK.TTF');//ttf的路径
    }
    需要修改字体的地方设置font-family为XiaoBiaoSong即可。

    最终效果如下:



    展开全文
  • 网页中的自定义字体

    2021-02-05 10:27:24
    CSS3引入的@font-face,让我们为我们的文本引入自定义字体,指定的字体可以从远程服务器或者用户本地安装的字体加载。@font-face规则不仅仅可以使用在CSS的顶层,还可以用在任何CSS条件组规则。 一般我们使用只...

    自定义字体

    CSS3引入的@font-face,让我们为我们的文本引入自定义字体,指定的字体可以从远程服务器或者用户本地安装的字体加载。@font-face规则不仅仅可以使用在CSS的顶层,还可以用在任何CSS条件组规则中。

    一般我们使用只需要向下面这样定义就可以:

    @font-face {
      font-family: "Open Sans";
      src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
           url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
    }
    复制代码
    

    除了上面两个数户型,它还有一些列的属性,来指定字体的具体属性,可以参考MDN的文档

    字体类型

    常见的字体类型有以下几种:

    • .ttf:True Type,是Windows和Mac系统最常用的字体格式,它可以任意缩放和旋转不会出现锯齿
    • .otf:Open Type,是可缩放性的电脑字体类型,是微软与Adobe共同开发用来替代TrueType的新字形
    • .eot:Embedded Open Type,微软开发的嵌入字体格式
    • .woff,Web Open Font Format,专门为了We设计的字体格式标准,是对True Type、Open Type等字体格式的封装,并针对网络使用进行了优化
    • .svg,Scalable Vector Graphics Fonts,使用SVG来呈现字体(.svgz是使用了Gzip压缩的SVG字体)

    目前现代浏览器基本都支持.ttfotfwoff的字体格式,如果为了保证兼容不同的浏览器,一般会同时指定多个格式

    @font-face {
      font-family: 'myFont';
      src: url('myFont.eot'); /* IE9 Compat Modes */src: url('myFont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('myFont.woff') format('woff'), /* Modern Browsers */;
    }
    复制代码
    

    实际使用

    在字体天下这个网站,随便找到了一个字体PangMenZhengDaoQingSongTi-2.otf下载下来,放到本地目录中。

    因为字体是我随便下载的,只有otf这种格式。

    然后在CSS文件中,首先声明我自定义的字体名和位置:

    @font-face {
      font-family: 'Secret Font';
      src: url('../assets/fonts/PangMenZhengDaoQingSongTi-2.otf');
    }
    复制代码
    

    然后在一个类中使用自定义字体:

    .special {
      font-family: 'Secret Font', sans-serif; /* 使用 @font-face 自定义的字体 */font-size: 40px;
    }
    复制代码
    

    效果:

    https://user-gold-cdn.xitu.io/2019/12/6/16ed9304ae34245f?imageView2/0/w/1280/h/960/format/webp/ignore-error/1

    自定义图标字体(IconFont)

    在ElementUI中我们经常使用的Icon图标实际上就是使用了自定义字体的技术,实际上它就是把一些简单的图标制作成为了字体,然后让图标变成和文字一样,可以通过CSS去改变颜色、大小等,非常方便。

    比较常用的是阿里巴巴推出的IconFont ,在上面找到我们想要使用的图标之后,有下面几种引用方法:

    (1)直接下载

    直接将图标保存为SVG、PNG等格式,然后在项目中引入,这种引用方式一般适合图标引用很少,且不需要维护的场景,比如做Demo页、活动页等

    https://user-gold-cdn.xitu.io/2019/12/6/16ed9304ad155d47?imageView2/0/w/1280/h/960/format/webp/ignore-error/1

    (2)unicode引用

    unicode是字体在网页端最原始的应用方式,兼容性好,可以按照字体的方式去动态调整图标大小,颜色。不支持多色,使用时需要首先将选好的图标放到一个项目中,然后拷贝项目下面生成的的font-face

    @font-face {
      font-family: 'iconfont';
      src: url('iconfont.eot');
      src: url('iconfont.eot?#iefix') format('embedded-opentype'),
        url('iconfont.woff') format('woff'),
        url('iconfont.ttf') format('truetype'),
        url('iconfont.svg#iconfont') format('svg');
    }
    复制代码
    

    然后在CSS定义使用IconFont的样式:

    .iconfont {
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -webkit-text-stroke-width: 0.2px;
      -moz-osx-font-smoothing: grayscale;
    }
    复制代码
    

    然后找到图标对应的字体unicode编码,它指定的文字在我们自定义字体中对应的不是一个文字,而是一个图标,所以就能将这个图标应用于页面了:

    <i class="iconfont">&#x33;</i>
    复制代码
    

    (3)font-class引用

    这种方式使用时的一个不方便之处就是,unicode码不直观,语义不明确,所以可以使用font-class来引入。

    它本质上和上一种方式的引用是相同的,只是系统帮我们在CSS中定义了图标的unicode对应的CSS类,所以需要先引入项目下面生成的CSS代码:

    //at.alicdn.com/t/font_8d5l8fzk5b87iudi.css
    复制代码
    

    然后就可以直接使用图标的类名来引用图标了:

    <i class="iconfont icon-xxx"></i>
    复制代码
    

    (4)symbol引用

    这种引用方式实际上和自定义字体没什么关系了,它实际上是通过SVG来引入,做了一个SVG的集合,它支持多色图标,并且通过一些技巧让我们仍然可以通过font-sizecolor来调整样式。

    但是它兼容性较差,不支持IE9之前的浏览器,并且浏览器渲染SVG的性能比较差。

    引入的时候需要拷贝项目下的JavaScript代码:

    //at.alicdn.com/t/font_8d5l8fzk5b87iudi.js
    复制代码
    

    然后加入通用CSS代码,引入一次即可:

    <style type="text/css">
      .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
    </style>
    复制代码
    

    然后挑选类名,通过<svg><use>标签引入图标:

    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-xxx"></use>
    </svg>
    复制代码
    

    加密自定义字体

    打开大众点评的网站,随表找一家店铺,复制它的评论数:

    [data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="563" height="206"></svg>](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="563" height="206"></svg>)

    复制的结果竟然是:

    再打开控制台,找到对应的HTML代码:

    [data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="534" height="141"></svg>](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="534" height="141"></svg>)

    在控制台也是乱码。查看网页的源代码,可以看出数字对应的是一个unicode编码:

    <d class="num">&#xf72e;</d>
    复制代码
    

    它有一个num的类:

    .num {
      font-family: 'PingFangSC-Regular-num';
    }
    复制代码
    

    如果将这个类取消,那么页面上的数字也都会出现乱码。一切的秘密都是在这个类上。

    这个类就是我们上面提到的自定义字体,在大众点评的静态资源中,找到了一份样式文件,就定义了这个字体:

    @font-face {
      font-family: "PingFangSC-Regular-hours";
      src: url("//s3plus.meituan.net/v1/mss_73a511b8f91f43d0bdae92584ea6330b/font/0b355749.eot");
      src: url("//s3plus.meituan.net/v1/mss_73a511b8f91f43d0bdae92584ea6330b/font/0b355749.eot?#iefix") format("embedded-opentype"), url("//s3plus.meituan.net/v1/mss_73a511b8f91f43d0bdae92584ea6330b/font/0b355749.woff");
    }
    
    .hours {
      font-family: 'PingFangSC-Regular-hours';
    }
    
    @font-face {
      font-family: "PingFangSC-Regular-address";
      src: url("//s3plus.meituan.net/v1/mss_73a511b8f91f43d0bdae92584ea6330b/font/aa7e2f36.eot");
      src: url("//s3plus.meituan.net/v1/mss_73a511b8f91f43d0bdae92584ea6330b/font/aa7e2f36.eot?#iefix") format("embedded-opentype"), url("//s3plus.meituan.net/v1/mss_73a511b8f91f43d0bdae92584ea6330b/font/aa7e2f36.woff");
    }
    
    .address {
      font-family: 'PingFangSC-Regular-address';
    }
    
    @font-face {
      font-family: "PingFangSC-Regular-dishname";
      src: url("//s3plus.meituan.net/v1/mss_73a511b8f91f43d0bdae92584ea6330b/font/53426607.eot");
      src: url("//s3plus.meituan.net/v1/mss_73a511b8f91f43d0bdae92584ea6330b/font/53426607.eot?#iefix") format("embedded-opentype"), url("//s3plus.meituan.net/v1/mss_73a511b8f91f43d0bdae92584ea6330b/font/53426607.woff");
    }
    
    .dishname {
      font-family: 'PingFangSC-Regular-dishname';
    }
    
    @font-face {
      font-family: "PingFangSC-Regular-review";
      src: url("//s3plus.meituan.net/v1/mss_73a511b8f91f43d0bdae92584ea6330b/font/52e0505f.eot");
      src: url("//s3plus.meituan.net/v1/mss_73a511b8f91f43d0bdae92584ea6330b/font/52e0505f.eot?#iefix") format("embedded-opentype"), url("//s3plus.meituan.net/v1/mss_73a511b8f91f43d0bdae92584ea6330b/font/52e0505f.woff");
    }
    
    .review {
      font-family: 'PingFangSC-Regular-review';
    }
    
    @font-face {
      font-family: "PingFangSC-Regular-num";
      src: url("//s3plus.meituan.net/v1/mss_73a511b8f91f43d0bdae92584ea6330b/font/0b355749.eot");
      src: url("//s3plus.meituan.net/v1/mss_73a511b8f91f43d0bdae92584ea6330b/font/0b355749.eot?#iefix") format("embedded-opentype"), url("//s3plus.meituan.net/v1/mss_73a511b8f91f43d0bdae92584ea6330b/font/0b355749.woff");
    }
    
    .num {
      font-family: 'PingFangSC-Regular-num';
    }
    
    @font-face {
      font-family: "PingFangSC-Regular-shopdesc";
      src: url("//s3plus.meituan.net/v1/mss_73a511b8f91f43d0bdae92584ea6330b/font/aa7e2f36.eot");
      src: url("//s3plus.meituan.net/v1/mss_73a511b8f91f43d0bdae92584ea6330b/font/aa7e2f36.eot?#iefix") format("embedded-opentype"), url("//s3plus.meituan.net/v1/mss_73a511b8f91f43d0bdae92584ea6330b/font/aa7e2f36.woff");
    }
    
    .shopdesc {
      font-family: 'PingFangSC-Regular-shopdesc';
    }
    复制代码
    

    可以看出它定义了多个自定义字体,并且为不同的类加载不同的字体,数字的类是.num,它对应的自定义字体就是PingFangSC-Regular-num

    它做的这一切都是为了防爬虫,因为对于大众点评来说它的这些数据就是它的核心资产,如果被网络爬虫爬走,那是巨大损失,它的优势也就不复存在。所以大众点评和众多的网络爬虫制造者之间展开了一场异常艰苦的攻防战。

    它使用了自定义字体,但是还不足以达到上面的效果,它使用了加密自定义字体技巧,这是一种CSS加密方式,是一种应用广泛的反爬技术。

    字体加密的原理是,用凯撒加密的方式将明文(下图的原文)替换为密文(下图的阴书),加密的密钥(也就是下图字验)就是上面font-face声明的自定义字体,加密好之后,HTML源码中是密文,使用自定义字体作为密钥进行CSS解密,渲染在页面上的就是解密后的正常的明文了

    https://user-gold-cdn.xitu.io/2019/12/6/16ed9304c0121a5b?imageView2/0/w/1280/h/960/format/webp/ignore-error/1

    参考

    原文链接: https://juejin.cn/post/6844904014866284552

    展开全文
  • 但是有个问题就是即使本地安装思源黑体的字体网页是要上传到服务器的,用户访问网站,他们的电脑可不一定有思源黑体这种字体,除非在客户端安装这种字体,不然用户电脑是无法显示这种字体的。 ①首先在自己本机上...
  • 读取本地网页,读取文本字体样式,读取视频。 res/raw和assets的相同点: 1.两者目录下的文件在打包后会原封不动的保存在apk包中,不会被编译成二进制。 res/raw和assets的不同点: 1.res/raw的文件会被...
  • 经过一位高手的提点,能用CSS直接实现,查阅了部分资料 并经过测试 总结下列方法来实现网页中的自定义字体 我们很容易发现EOT字体仅仅对于IE浏览器支持 面对庞大的IE用户 EOT字体的重要性也就不说了 对
  • 网页时常常需要用到一些标志性的小图标 可以通过放置小图标的图片来实现,但也可以通过使用矢量图标来做,使用矢量图标的...在需要用到矢量图标的网页的style文件,添加字体,注意选择对应文件路径 @font-face {
  • @font-face可以实现从服务器端加载字体,所有浏览器中使用的字体就可以不受本地字体的限制。@font-face真的不是什么新鲜玩意,早在2001年时就被提出来,只不过近两年才被各浏览器广泛支持。而...
  • 这是因为网页中使用了某种字体的缘故,分析源代码可知: 亲测可行:  代码中获取的是国内票房榜,稍加修改也可适用于最受期待榜和北美票房榜 解决思路如下: 1.获取网页数据后,查找字体信息,获取到字体链接,...
  • CSS3 中引入了 font-face(嵌入字体类型),实验 font-face 可以把需要的字体上传到自己的服务器,再在服务器的网页中使用字体并显示出来,无论浏览网页的用户的本地端是否有该字体。 语法: CSS Code复制内容到...
  • 问题描述:  linux提供的web服务,能在网页展示中文,下载pdf出现中文无法读取!...#linux安装中文字体Windows下的ttf/ttc字体是可以在linux上使用,确定网页使用字体类型,必须对的上! #o...
  • 网页制作,如果想使用特定的字体可以通过 @font-face 引用,即是解决访问用户电脑本地没有安装该字体导致不能按设计样式显示的问题。 注意: 支持 @font-face 的浏览器有Internet Explorer 9、Firefox Opera、...
  • 今天写完网页加载的自定义字体文件,发现需要加载30s,非常影响网站访问,于是找到了字蛛...通过对本地CSS 与HTML 文件的爬取,将用到的字符爬取出来并将没用到的这些字符数据从字体中删除以实现压缩 2.使用教程: ...
  • 1、到阿里字体库网站中,登录账号。... ... 2、在图标库中查找自己需要的图标...3、如何将想用的图标应用在html网页中? 下图为下载的阿里图标。 首先将iconfont.css文件引入到html中(注意路径): <link re...
  • 最近在弄 three.js ,但是在加载 3D 中文字体的时候发现,带中文字体的文件太大了,从 TextLoader 加载字体文件再到绘制到我网页上的这个时间好几秒(虽然只是本地调试),所以,想着怎样压缩一下 .ttf 文件。...
  • 代码中使用: 注:更改图标的类名 更改后重新获取网页链接--重新引入链接--重新写类名 报错:没有显示的话,Chrome调试工具f12,看看右边有没有 下载下来的文件夹只需要把这几个放到项目中(同一层目录的...
  • 1. 安装网页插件Stylus该方法与许大森的回答相同,即安装Chrome插件Stylish(此插件已经下架,请使用同作者的替代插件Stylus),然后新建自己的Jupyter样式~优点:应用和取消样式比较方便,同步和更新可以借助Stylish...
  • 1. 安装网页插件Stylus该方法与许大森的回答相同,即安装Chrome插件Stylish(此插件已经下架,请使用同作者的替代插件Stylus),然后新建自己的Jupyter样式~优点:应用和取消样式比较方便,同步和更新可以借助Stylish...
  • 在web编程,经常要持久存储用户的一些信息,比如购物车,收藏夹,设置等待...可是如果一种应用不需要和服务器进行数据交互,比如网页的偏好设置(字体大小,语言,界面样式等),我们希望用户本地自己保存这些偏好设
  • 1. 安装网页插件Stylus该方法与许大森的回答相同,即安装Chrome插件Stylish(此插件已经下架,请使用同作者的替代插件Stylus),然后新建自己的Jupyter样式~优点:应用和取消样式比较方便,同步和更新可以借助Stylish...
  • 解决方法: 将相应文件放到本地搭建的服务器环境,在浏览器打开相应网页即可 原因:一开始是用本地文件打开。
  • CSS字体

    2015-06-24 17:53:46
    为什么外国网站字体本地电脑上并没有这种字体,但打开网站的网页还是会正常的应用了网站css设置的字体,这个是怎么做到的,关键在于在于在服务器端使用了 css的@font-face可以从服务器上载入指定的字体,你...
  • 字体图标

    2021-01-20 16:43:21
    字体图标和实体图标是大同小异的,它们的用法和效果是一样的。不同的是 实体图标来源...完成以上步骤就可以通过demo_index.html网页提供字体图标的代码直接在项目中使用 图下是页面效果图, 字体图标和实体图标的用法
  • 我一直在试图用所谓的奥斯瓦尔德一个WOFF字体本地加载外部请求,谷歌网页字体有时慢的最好的。 它的工作原理在Chrome和IE9,但不能在Firefox! 调查开始了... 有的被中止。 为什么要使用WOFF? 有使用WOFF三个主要...
  • iconfont字体图标.pdf

    2020-06-27 12:10:16
    iconfont介绍 (1)意义:使用字体用HTML代码以文本的形式直接在网页中画icon小图标。 (2)为什么使用icon字体...(7)本地使用:通过添加定制字体到你的本地系统,你可以在各种不同的设计和编辑应用程序中使用它们。

空空如也

空空如也

1 2 3 4 5 ... 13
收藏数 246
精华内容 98
关键字:

网页中使用本地字体