Android中使用SVG与WebFont矢量图标

最新推荐文章于 2021-05-27 11:37:35 发布

weixin_34191734

最新推荐文章于 2021-05-27 11:37:35 发布

阅读量91

点赞数

原文链接：https://my.oschina.net/ososchina/blog/495932

版权

2019独角兽企业重金招聘Python工程师标准>>>

一.参考文献

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字体图标

转载于:https://my.oschina.net/ososchina/blog/495932