在Gtk 3.0中基于窗口小部件大小缩放字体大小

我在使用CSS样式的Gtk 3.0（使用Vala）中有一个标签。我想根据小部件的大小缩放字体大小，以便字体填充小部件/标签，但不会变得太大。在Gtk 3.0中基于窗口小部件大小缩放字体大小

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

font-size: 5em

但是据我所知，这并不能用屏幕分辨率进行缩放。

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

以前我们使用的绝对比例（见本差异的一个令人惊讶的简洁explanation）但我们希望坚持使用CSS。

（more context如果你有兴趣）

来源

2016-02-01 abarry

如果您在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(); 
}

此只关心窗口的高度，因此，如果您调整窗口会更宽比它高，你会得到一个unreadably微小的标签，但你可以插入任何计算工作给你。

来源

2016-02-06 04:49:49 ptomato

完美地工作。就我而言，我们保证永远不会改变窗口大小，所以我[在没有事件的情况下实现您的解决方案]（https://github.com/andybarry/pdfpc/commit/19e279cf0a9f6f6bcc89c79185f7bf1bdf305c2b） – abarry

您需要设置

font-size: 5%

在CSS文件

来源

2016-02-03 10:17:33

这样做只是使文本非常小。据我了解，在这种情况下，'''''''''值是默认字体大小的百分比，而不是它所在的容器的百分比。所以在这种情况下，相当于'''5em'' ''是的''''500％'''' – abarry

在Gtk 3.0中基于窗口小部件大小缩放字体大小

回答

相关问题