# 自定义 Excalidraw 的字体大小

- Link: https://www.ixiqin.com/2022/03/27/custom-excalidraw-font-size/
- Published: 2022-03-27T06:00:00+08:00
- Author: 白宦成

文章目录

 [Toggle](https://www.ixiqin.com/2022/03/27/custom-excalidraw-font-size/#)

 * [修改 S、M、L、XL 对应的字体大小](https://www.ixiqin.com/2022/03/27/custom-excalidraw-font-size/#%e4%bf%ae%e6%94%b9_s%e3%80%81m%e3%80%81l%e3%80%81xl_%e5%af%b9%e5%ba%94%e7%9a%84%e5%ad%97%e4%bd%93%e5%a4%a7%e5%b0%8f)
 * [修改默认字体大小](https://www.ixiqin.com/2022/03/27/custom-excalidraw-font-size/#%e4%bf%ae%e6%94%b9%e9%bb%98%e8%ae%a4%e5%ad%97%e4%bd%93%e5%a4%a7%e5%b0%8f)

> Excalidraw 是一个非常好用的手绘风格的绘图工具，我给自己部署了一个版本来降低自己
> 写作配图的难度。如果你感兴趣，可以访问 draw.ixiqin.com 体验我自己维护的版本。
> 白宦成

Excalidraw 默认的字体整体比较小，对于我来说，习惯将图画的大一些，这样在不同的设备
上，都可以方便的看清楚图片的内容。

## 修改 S、M、L、XL 对应的字体大小

Excalidraw 将字体大小的变化定义在 `src/actions/actionProperties.tsx` 当中，因此，
你需要修改不同按钮具体的字体，则需要修改这里的配置。

![](https://files.ixiqin.com/2022/03/23082711/d2b5ca33bd970f64a6301fa75ae2eb22-12.
png)

字体大小修改工具

将下方代码中的 `options` 中 value 修改为你需要的值，即可实现不同的字体大小。

    ```php
    export const actionChangeFontSize = register({
      name: "changeFontSize",
      perform: (elements, appState, value) => {
        return changeFontSize(elements, appState, () => value, value);
      },
      PanelComponent: ({ elements, appState, updateData }) => (
        <fieldset>
          <legend>{t("labels.fontSize")}</legend>
          <ButtonIconSelect
            group="font-size"
            options={[
              {
                value: 20,
                text: t("labels.small"),
                icon: <FontSizeSmallIcon theme={appState.theme} />,
                testId: "fontSize-small",
              },
              {
                value: 28,
                text: t("labels.medium"),
                icon: <FontSizeMediumIcon theme={appState.theme} />,
                testId: "fontSize-medium",
              },
              {
                value: 36,
                text: t("labels.large"),
                icon: <FontSizeLargeIcon theme={appState.theme} />,
                testId: "fontSize-large",
              },
              {
                value: 50,
                text: t("labels.veryLarge"),
                icon: <FontSizeExtraLargeIcon theme={appState.theme} />,
                testId: "fontSize-veryLarge",
              },
            ]}
            value={getFormValue(
              elements,
              appState,
              (element) => {
                if (isTextElement(element)) {
                  return element.fontSize;
                }
                const boundTextElement = getBoundTextElement(element);
                if (boundTextElement) {
                  return boundTextElement.fontSize;
                }
                return null;
              },
              appState.currentItemFontSize || DEFAULT_FONT_SIZE,
            )}
            onChange={(value) => updateData(value)}
          />
        </fieldset>
      ),
    });
    Code language: PHP (php)
    ```

## 修改默认字体大小

默认字体的大小被定义在 `src/constants.ts`，你可以修改其中的 `DEFAULT_FONT_SIZE` 
来实现控制默认情况下的字体大小。

    ```javascript
    export const DEFAULT_FONT_SIZE = 28;
    Code language: JavaScript (javascript)
    ```

参考代码：[https://github.com/bestony/excalidraw/commit/78d2d103b40c48bdccbecd7deb85f1fd0d6b4d2f](https://github.com/bestony/excalidraw/commit/78d2d103b40c48bdccbecd7deb85f1fd0d6b4d2f)

[https://github.com/bestony/excalidraw/commit/14bca18aa6395280cfda15202beaf56dc966a401](https://github.com/bestony/excalidraw/commit/14bca18aa6395280cfda15202beaf56dc966a401)