BigText 技术文档

本文档将详细介绍如何安装、使用和配置 BigText 项目，帮助用户更好地理解和运用该项目。

1. 安装指南

1.1 使用 bower 安装

bower install bigtext

1.2 直接下载

从 BigText 官方网站下载 bigtext.js 文件。

2. 项目的使用说明

BigText 可使文本变得更大，适用于多种浏览器，尤其支持具有亚像素字体缩放功能的浏览器。

2.1 基础使用示例

<div id="bigtext">
    <span>大文本</span>
    <span>让文本变大</span>
</div>
<script>
    $('#bigtext').bigtext();
</script>

2.2 进阶使用示例

使用 display: inline 的子元素（如 span），以便在 BigText 未运行时文本可以正确流动。

<div id="bigtext">
    <span>大文本</span>
    <span>让文本变大</span>
</div>
<script>
    // 只在较新浏览器上运行 BigText
    if ('querySelectorAll' in document) {
        $('#bigtext').bigtext();    
    }
</script>

2.3 使用列表（有序/无序列表）

<ol id="bigtext">
    <li>大文本</li>
    <li>让文本变大</li>
</ol>
<script>
    $('#bigtext').bigtext();
</script>

2.4 限制为子集元素

使用 JavaScript 选择子元素

<div id="bigtext">
    <p>大文本</p>
    <p>让文本变大</p>
</div>
<script>
    $('#bigtext').bigtext({
        childSelector: '> p'
    });
</script>

使用标记排除行

<ol id="bigtext">
    <li>大文本</li>
    <li class="bigtext-exempt">让文本变大</li>
</ol>
<script>
    $('#bigtext').bigtext();
</script>

2.5 混合使用字体

<ol id="bigtext">
    <li>
        <span style="font-family: sans-serif">大</span>
        <span style="font-family: serif">文本</span>
    </li>
    <li>让文本变大</li>
</ol>
<script>
    $('#bigtext').bigtext();
</script>

2.6 使用自定义字体

警告：在使用 Google/TypeKit 字体加载器时存在已知问题。

<div id="bigtext">
    <span>大文本</span>
    <span>让文本变大</span>
</div>
<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
    $(function() {
        WebFont.load({
            custom: {
                families: ['LeagueGothicRegular'], // 字体名称
                urls: ['css/fonts/league-gothic/stylesheet.css'] // CSS URL
            },
            active: function() {
                $('#bigtext').bigtext();
            }
        });
    });
</script>

2.7 调整默认最大字体大小

<div id="bigtext">
    <span>大</span> <!-- 短的行会需要更大的字体大小 -->
</div>
<script>
    $('#bigtext').bigtext({
        maxfontsize: 60 // 默认为 528px
    });
</script>

2.8 添加默认最小字体大小

<div id="bigtext">
    <span>这是一行非常长的文本，可能会被调整到非常小的字体大小。我们需要一个最小字体大小！</span>
</div>
<script>
    $('#bigtext').bigtext({
        minfontsize: 16 // 默认为 null
    });
</script>

3. 项目API使用文档

BigText 提供以下配置选项：

• childSelector：用于选择子元素。
• maxfontsize：设置最大字体大小。
• minfontsize：设置最小字体大小。

4. 项目安装方式

4.1 使用 npm 安装

npm install bigtext

4.2 使用 bower 安装

bower install bigtext

4.3 直接下载

从 BigText 官方网站下载 bigtext.js 文件。

以上就是 BigText 项目的详细技术文档，希望对用户使用和了解该项目有所帮助。