Android中使用SVG與WebFont矢量圖標

一.參考文獻

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:'李旭科書法'
}

 

3、Android使用方法

3.一、下載fontawesome-webfont.ttf文件到assets文件中。 
下載地址：http://fontawesome.io/#modal-download 
如圖所示：

 
3.二、在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.三、使用一個照相機的圖標來舉一個例子 

    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字體圖標