Android 全局使用第三方字体

本文详细介绍如何为Android应用全局设置字体,包括原生界面和网页内容。对于原生界面,通过自定义Application及样式来实现;对于网页内容,则通过在HTML中加入特定JS代码来加载本地字体。

给APP全局设置字体主要分为两个方面来介绍

一、给原生界面设置第三方字体

  1、准备工作-下载第三方字体:传送门

    将文件放入工程assets目录下。(一般个人习惯单独命名一个文件夹放字体文件,也可直接放入根目录,但记得改引用路径)

    

 

  2、代码实现

    a、自定义application,将第三方的字体,替换当前系统默认字体

    

    b、定义style

    

<style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:typeface">monospace</item>
</style>

    c、设置在manifests文件中设置application

    

<application
        android:name=".application.WeexApplication"
        android:allowBackup="true"
        android:icon="@drawable/app_icon"
        android:label="@string/app_name"
        android:roundIcon="@drawable/app_icon"
        android:supportsRtl="true"
        android:theme="@style/AppTheme.NoActionBar">

    注:需要注意name是自定义application路径,theme是自定义风格

二、给网页设置第三方字体

  1、加载本地HTML页面使用本地字体

  这种情况比较容易,只需要在本地文件上添加JS代码即可

    <style>

        @font-face {
            font-family: 'MyCustomFont';
            src: url('file:///android_asset/fonts/textstyle.ttf');
        }
        p{
            font-family:"MyCustomFont";
            font-size: x-large;
        }

        body {
            margin: 0;
        }
    </style>
<body  style='font-family:MyCustomFont;'>

 

  2、加载网络HTML页面使用本地字体

   将网络页面字体转换可以参考如下网址:http://blog.youkuaiyun.com/aiynmimi/article/details/52777965

### 如何通过 CSS 加载并应用第三方字体 #### 定义字体 为了在项目中使用自定义的第三方字体,可以通过 `@font-face` 规则来定义字体。以下是几种常见的实现方式: 1. **本地加载字体文件** 使用本地存储的字体文件时,可以创建一个 `.css` 文件,在其中定义 `@font-face` 并指定字体路径以及字体名称。例如: ```css @font-face { font-family: 'Droid Sans Mono'; /* 字体名称 */ src: url("Droid-Sans-Mono.ttf") format('truetype'); /* 字体文件路径及格式 */ font-weight: normal; font-style: normal; } ``` 这种方法适用于将字体文件放置于项目的静态资源目录下[^1]。 2. **Vue 项目中的相对路径加载** 如果是在 Vue.js 或类似的前端框架中开发,则可以在组件样式部分或者全局样式文件中引入字体。例如: ```css @font-face { font-family: 'my-font'; src: url('~@/static/my-font.ttf') format('truetype'); } ``` 此处假设字体文件位于 `/static/fonts` 路径下,并且通过 Webpack 的别名配置访问[^2]。 3. **远程加载字体** 当需要从网络地址获取字体时,可以直接在 URL 中提供完整的 HTTP 地址。例如: ```css @font-face { font-family: 'font-name'; src: url('https://example.com/path/to/font.ttf') format('truetype'); } ``` 远程加载的方式适合用于 CDN 提供的服务或其他公开可用的字体资源[^3]。 4. **支持多种字体格式** 不同浏览器可能对某些字体格式的支持程度不同,因此建议为同一字体提供多个版本以提高兼容性。例如: ```css @font-face { font-family: 'CustomFont'; src: url('custom.eot?#iefix') format('embedded-opentype'), /* IE9 Compat Modes */ url('custom.woff2') format('woff2'), /* Super Modern Browsers */ url('custom.woff') format('woff'), /* Pretty Modern Browsers */ url('custom.ttf') format('truetype'); /* Safari, Android, iOS */ } ``` 上述代码片段展示了如何针对不同的浏览器环境优化字体加载过程[^4]。 #### 应用已定义的字体 一旦完成字体的定义工作,就可以将其应用于 HTML 元素上。只需设置目标元素的 `font-family` 属性即可。例如: ```css body { font-family: 'Droid Sans Mono', monospace; /* 主要字体优先级最高 */ } h1 { font-family: 'my-font', sans-serif; } p { font-family: 'font-name', serif; } ``` #### 总结 以上介绍了四种主要的方法来通过 CSS 引入和使用第三方字体:本地加载、Vue 配置下的相对路径加载、远程加载以及多格式支持策略。每一种都有其适用场景和技术细节需要注意。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值