如何动态更改 flex 应用程序的字体大小？答案

【问题标题】：How to change font size of the flex application dynamically?如何动态更改 flex 应用程序的字体大小？
【发布时间】：2012-04-24 10:09:03
【问题描述】：

我想在单击按钮时动态更改应用程序的字体大小。

有什么想法吗？请指导我们

谢谢大家

【问题讨论】：

标签： actionscript-3 apache-flex flex4 flex3 flex4.5

【解决方案1】：

这是Maxim Kachurovskiy使用CSS的一些代码

（它不是我的，部分已弃用，但效果很好）：

FontSize.mxml：

<?xml version="1.0" encoding="utf-8"?>
<!-- (c) Maxim Kachurovskiy -->
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml"
    addedToStage="addedToStageHandler();"
    initialize="fontSize = 11;">

    <mx:Style>
        .header {
            font-weight: bold;
            fontSizeDelta: 5;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            private var _fontSize:Number;

            [Bindable("fontSizeChange")]
            public function get fontSize():Number {
                return _fontSize;
            }

            public function set fontSize(value:Number):void {
                if (_fontSize == value)
                    return;

                _fontSize = value;
                applyFontSize(_fontSize);
                dispatchEvent(new Event('fontSizeChange'));
            }

            private function applyFontSize(fontSize:Number):void {
                var selectors:Array = StyleManager.selectors;
                for each (var selector:String in selectors) {
                    var declaration:CSSStyleDeclaration = StyleManager.getStyleDeclaration(selector);
                    var delta:Number = declaration.getStyle('fontSizeDelta');
                    if (delta) {
                        declaration.setStyle('fontSize', fontSize + delta);
                        StyleManager.setStyleDeclaration(selector, declaration, true);
                    }
                }

                var global:CSSStyleDeclaration = StyleManager.getStyleDeclaration('global');
                if (!global)
                    global = new CSSStyleDeclaration('global');
                global.setStyle('fontSize', fontSize);
                StyleManager.setStyleDeclaration('global', global, true);
            }

            private function addedToStageHandler():void {
                stage.addEventListener(KeyboardEvent.KEY_UP, my_keyUpHandler);
            }

            private function my_keyUpHandler(event:KeyboardEvent):void {
                if (event.ctrlKey) {
                    var keyCode:uint = event.keyCode;
                    if (keyCode == 107 || keyCode == 187 || keyCode == 38)
                        fontSize++;
                    else if (keyCode == 109 || keyCode == 189 || keyCode == 40)
                        fontSize--;
                }
            }
        ]]>
    </mx:Script>

    <mx:Panel title="Font size change" layout="vertical"
              horizontalCenter="0" verticalCenter="0" paddingBottom="10"
              paddingLeft="10" paddingRight="10" paddingTop="10">
        <mx:HBox horizontalGap="10">
            <mx:Label text="Font size:" styleName="header"/>
            <mx:NumericStepper id="numericStepper" value="{fontSize}" 
               change="{fontSize = numericStepper.value;}" maximum="100" minimum="1"/>
        </mx:HBox>
        <mx:Label text="Ctrl+/- adjust font size too."/>
    </mx:Panel>
</mx:Application>

【讨论】：

【解决方案2】：

这里是增加按钮点击字体大小的代码...检查

<mx:Label id="lb" text="INDIA"/>
<mx:Button label="change" click="button1_clickHandler(event)"/>


protected function button1_clickHandler(event:MouseEvent):void
{
    lb.setStyle('fontSize',Number(lb.getStyle('fontSize'))+5);
}


lb.setStyle('fontSize',Number(lb.getStyle('fontSize'))+5);

从标签中获取之前的字体值并将其增加 5 并再次设置...

或

你可以直接设置取先前字体大小的值

lb.setStyle('fontSize',Math.random()*200);

【讨论】：

谢谢，这里正在寻找增加整个应用程序大小而不是单个控件:)

【解决方案3】：

这可以帮助你...

[Bindable]private var _size:Number = 10;

protected function button1_clickHandler(event:MouseEvent):void
{
        _size = _size+10;
}

<mx:Label id="lb" text="INDIA" fontSize="{_size}"/>
<mx:Label id="lb1" text="I love India" fontSize="{_size}"/>

<mx:Button label="change" click="button1_clickHandler(event)" />

【讨论】：