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

Question

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

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

font-size: 5em

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

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

之前我们使用了绝对缩放（查看这个 diff 以获得惊人的简洁 explanation），但我们想坚持使用 CSS。

（more context 如果你有兴趣）

Answer 1

您需要设置

font-size: 5%

在 CSS 文件中

Answer 2

如果您以 ems 或 % 为单位设置字体大小，它将以默认字体大小为基础。诀窍是根据 window 大小更改默认字体大小。连接到 window 的 configure_event，并在 window 调整大小时设置新的默认字体大小。

这是一个简化的例子：

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();
}

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

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

Scale font size based on widget size in Gtk 3.0

css

gtk

vala