根据Gtk 3.0中的窗口小部件大小缩放字体大小

Question

我在Gtk 3.0（使用Vala）中有一个用CSS设计的标签。我想根据小部件的大小来缩放字体大小，以便字体填充小部件/标签，但永远不会太大。

使用CSS方法做到这一点的最佳方法是什么？现在我将字体设置为

public class MyClass
{
      private MyEnum _sharedEnumVal { get; set; }
}

但据我所知，这不会随着屏幕分辨率而缩放。

例如，在较低分辨率的屏幕上，我得到了这个（注意截止时钟）：

之前我们使用绝对缩放（请参阅此差异以获得令人惊讶的简洁explanation），但我们希望坚持使用CSS。

（more context，如果您有兴趣）

Answer 1

如果您以ems或％设置字体大小，它将基于默认字体大小。诀窍是根据窗口大小更改默认字体大小。连接到窗口的configure_event，并在调整窗口大小时设置新的默认字体大小。

这是一个简化的例子：

const string WINDOW_CSS_TEMPLATE = "#mywindow { font-size: %fpx; }";
const string APPLICATION_CSS = "#mywindow .label { font-size: 5em; }";

void main(string [] args) {
    Gtk.init(ref args);

    var win = new Gtk.Window();
    win.name = "mywindow";
    win.default_width = 800;
    win.default_height = 600;
    var label = new Gtk.Label("Some text");
    label.halign = Gtk.Align.END;
    label.valign = Gtk.Align.END;
    win.add(label);
    win.destroy.connect(Gtk.main_quit);

    var win_provider = new Gtk.CssProvider();
    Gtk.StyleContext.add_provider_for_screen(Gdk.Screen.get_default(),
        win_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);

    var app_provider = new Gtk.CssProvider();
    try {
        app_provider.load_from_data(APPLICATION_CSS, -1);
    } catch (Error e) {
        Process.exit(1);
    }
    Gtk.StyleContext.add_provider_for_screen(Gdk.Screen.get_default(),
        app_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);

    win.configure_event.connect((event) => {
        try {
            // Replace this with your desired calculation of the base font size
            var target_size = (double) event.height / 600.0 * 12.0;
            var css = WINDOW_CSS_TEMPLATE.printf(target_size);
            win_provider.load_from_data(css, -1);
        } catch (Error e) {
            Process.exit(1);
        }
        return Gdk.EVENT_PROPAGATE;
    });

    win.show_all();
    Gtk.main();
}

这只关心窗口的高度，所以如果你调整窗口大小比它高，你会得到一个不可读的小标签，但你可以插入任何适合你的计算。

Answer 2

您需要设置

font-size: 5%

CSS文件中的