search

lc-soft / LCUI

C library for building user interfaces
https://lcui-dev.github.io
MIT License
4.12k stars 356 forks source link

Using custom fonts #257

Closed TheSystemIsCorrupt closed 2 years ago

TheSystemIsCorrupt commented 2 years ago

Hi, it's few days I found your library it's very clean, nice and smooth, thank you so much for this great library. I was working with ultralight and qtwebengine and they are heavy for what I want and lcui is just what I needed.

I could successfully build all the lcui projects and demos and now I started to learn how it works, I couldn't find any documatiaon in english that tells how to connect ui to backend c like clicks and data syncing.

Currently i attempted to use a custom font for the page I searched in lcui-design and found out some fontface interface inside css files, I tried it but it doesn't work.

This is my file structre : app-start.exe app_data/style.css app_data/main.xml app_data/font.ttf

Here's main.xml :

<?xml version="1.0" encoding="UTF-8" ?>
<LCUI-app>
  <resource type="text/css" src="app_data\style.css"/>
  <ui>
    <w type="textview" class="big_header">Hello World</w>
  </ui>
</LCUI-app>

And here's style.css : 

@font-face 
{
  font-family: 'textfont';
  src: url("font.ttf");
}

.big_header
{
    font-family: textfont;
    font-size:30px;
    color: #eeeeee;
    text-align: center;
    width:100%;
    margin-top: 20px;
}

root 
{
  font-family: textfont;
  min-width: 920px;
  min-height: 480px;
  background-color: #7940ff;
}

Application runs without any error but the font never gets applied, am I missing something? How can I use a custom font?

TheSystemIsCorrupt commented 2 years ago

Same source works in firefox : lcui-vs-firefox

<!DOCTYPE html>
<html>
    <head>
      <link rel="stylesheet" href="app_data\style.css">
    </head>

    <body>
      <ui>
        <div type="textview" class="header_text">Hello World!</div>
      </ui>
    </body>
</html>
lc-soft commented 2 years ago

LCUI loads the font file specified by src in @font-face, but does not register the font with a new font-family in the font library. Therefore, you need to use the default font family name in the font file.

https://github.com/lc-soft/LCUI/blob/ae7d27c50a0f93e9c28b2f2ede58b6372d9a50d5/src/gui/css_parser.c#L1079-L1098

TheSystemIsCorrupt commented 2 years ago

@lc-soft thanks! Does this mean we only can have one font for our application ui?

Can you explain what you mean from : > Therefore, you need to use the default word family name in the font file.

Let's say I have Impact.ttf and Roboto.ttf is it possible to use them both in same ui page? if yes how?

TheSystemIsCorrupt commented 2 years ago

Oh now I get it, the font name inside the font file! Some other note if someone seek for same thing, in html/css font path should be releative to css file but in lcui it should be relative to app/exe file.

/* Bold */
@font-face 
{
src: url("app_Data/font.ttf");
}

/* Light */
@font-face 
{
src: url("app_Data/font2.ttf");
}