文档章节

Android中使用SVG与WebFont矢量图标

IamOkay
 IamOkay
发布于 2015/08/23 11:10
字数 550
阅读 521
收藏 0

一.参考文献

1.http://www.cnblogs.com/yes-V-can/p/5716853.html

2.http://blog.csdn.net/zhouwangling_/article/details/53096649

二.html使用方法

1.下载字体

网上百度自己要使用的字体,一般下载的是ttf格式,需要4种(或5)格式,其他的格式可以通过在线工具基于ttf转换

http://www.fontke.com/tool/convfont/(这个最好用)

web-fontmin(这个在线转换工具更好用,注意,左边编辑框里的字全删除再上传ttf,不然只会转换框里的那些字体)

在线格式转换点此(注:该网站我成功转过,有时候会报错,多试几次)

2.css加载

@font-face {
    font-family: "李旭科书法";
    src: url("../font/李旭科书法.eot"); /* IE9 */
    src: url("../font/李旭科书法.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../font/李旭科书法.woff") format("woff"), /* chrome, firefox */
    url("../font/李旭科书法.ttf") format("truetype"), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url("../font/李旭科书法.svg#李旭科书法") format("svg"); /* iOS 4.1- */
    font-style: normal;
    font-weight: normal;
}

3.使用:在需要使用该字体的地方用即可:

.class{
font-family:'李旭科书法'
}

 

三、Android使用方法

3.1、下载fontawesome-webfont.ttf文件到assets文件中。 
下载地址:http://fontawesome.io/#modal-download 
如图所示:

这里写图片描述 
3.2、在values/strings.xml文件中(或者新建一个fonts.xml文件),定义资源,查看地址:http://fontawesome.io/cheatsheet/

<resources>
    <string name="fa_camera">&#xf030;</string>
    <string name="fa_500px">&#xf26e;</string>
    <string name="fa_adjust">&#xf042;</string>
    <string name="fa_adn">&#xf170;</string>
    <string name="fa_align_center">&#xf037;</string>
    <string name="fa_align_justify">&#xf039;</string>
    <string name="fa_align_left">&#xf036;</string>
</resources>

3.3、使用一个照相机的图标来举一个例子 

    1.在布局文件中定义一个TextView:

   <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.weather.MainActivity">

    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/fa_camera" />
</RelativeLayout>
  package com.weather;

import android.graphics.Typeface;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    TextView textView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Typeface font = Typeface.createFromAsset(getAssets(),"fontawesome-webfont.ttf");
        textView= (TextView) findViewById(R.id.text_view);
        textView.setTypeface(font);

    }
}

就可以在TextView的位置显示一个相机的图标。 
demo下载:http://download.csdn.net/detail/qq_17525769/9581597

参考文章

WebFont ICON,FontIcon在Android中的使用示例

Android VectorDrawable与SVG

利用css3的content属性添加fontAwesome字体图标

 

© 著作权归作者所有

IamOkay

IamOkay

粉丝 205
博文 483
码字总数 403230
作品 0
海淀
程序员
私信 提问
SVG前戏—让你的View多姿多彩

什么是SVG SVG的全称是Scalable Vector Graphics,叫可缩放矢量图形。是一种基于可扩展标记语言(XML)。它和位图(Bitmap)相对,SVG不会像位图一样因为缩放而让图片质量下降。它的优点在于...

codeGoogle
2018/08/07
0
0
字体图标(font-icon),你还有什么理由不使用它?

优点 下面的简介来自,著名字体图标库Font Awesome的首页,http://fontawesome.io: Font Awesome gives you scalable vector icons that can instantly be customized — size, color, dro......

Myou_Aki
2019/09/29
0
0
react-native-vector-icons 和 自定义字体图标

安装和配置react-native-vector-icons 根目录下使用 安装完成后运行命令link这个库 Android端的配置: 打开android /中并创建了的目录 黏贴node_modules/react-native-vector-icons/Fonts的文...

罗培海
2018/09/04
207
0
[译] 了解 Android 的矢量图片格式:`VectorDrawable`

原文地址:Understanding Android’s vector image format: VectorDrawable 原文作者:Nick Butcher 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:HarderChen 校对...

Android_开发者
2019/04/02
0
0
Android SVG、Vector和VectorDrawable矢量图及动画

Vector图像,第三方Sharp库,阿里巴巴的SVG图。 阿里巴巴矢量图库(http://www.iconfont.cn/) Android矢量图(一)--VectorDrawable基础- https://www.jianshu.com/p/0972a0d290e9 android下一些...

desaco
2018/10/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

MBTI助你成功,让你更了解你自己

MBTI助你成功,让你更了解你自己 生活总是一个七日接着又一个七日,相信看过第七日的小伙伴,很熟悉这段开场白,人生是一个测试接着又一个测试,上学的时候测试,是为了证明你的智力,可谓从...

蛤蟆丸子
40分钟前
49
0
Android实现App版本自动更新

现在很多的App中都会有一个检查版本的功能。例如斗鱼TV App的设置界面下: 当我们点击检查更新的时候,就会向服务器发起版本检测的请求。一般的处理方式是:服务器返回的App版本与当前手机安...

shzwork
昨天
63
0
npm 发布webpack插件 webpack-html-cdn-plugin

初始化一个项目 npm init 切换到npm源 淘宝 npm config set registry https://registry.npm.taobao.org npm npm config set registry http://registry.npmjs.org 登录 npm login 登录状态......

阿豪boy
昨天
87
0
java基础(16)递归

一.说明 递归:方法内调用自己 public static void run1(){ //递归 run1(); } 二.入门: 三.执行流程: 四.无限循环:经常用 无限递归不要轻易使用,无限递归的终点是:栈内存溢出错误 五.递...

煌sir
昨天
63
0
REST接口设计规范总结

URI格式规范 URI中尽量使用连字符”-“代替下划线”_”的使用 URI中统一使用小写字母 URI中不要包含文件(脚本)的扩展名 URI命名规范 文档(Document)类型的资源用名词(短语)单数命名 集合(Co...

Treize
昨天
69
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部