css - 根据 Gtk 3.0 中的小部件大小缩放字体大小

Question

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

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

font-size: 5em

但据我所知，这与屏幕分辨率无关。

例如，在较低分辨率的屏幕上，我得到这个(注意截止时钟):

之前我们使用了绝对缩放(参见这个 diff 以获得惊人的简洁 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();
}

这只关心窗口的高度，因此如果您将窗口的大小调整为比高度宽得多，您将得到一个难以阅读的小标签，但您可以插入任何适合您的计算。