HTML Tabellen-Zelle mit einer besonderen Schriftart

Hallo Leute,

bin hier am rumprobieren, bin aber in HTML da nicht so bewandert. Die Tabelle steht insgesamt, die Krönung wäre einigen betimmten Zellen eine eignen TrueType Schrift zu geben…

So (und auch anderes versucht) geht es nicht:

$table .= '<src='.$FileName.'> <rel="stylesheet">';
$table .= '<font face="Advanced Pixel LCD-7">'; 
$table .= '<td class="tg-611x"> <font face="Advanced Pixel LCD-7"> <font size=3>'.$Value." €".'</td>';

Der $FileName weist auf die richtige ttf-Datei.
Wo liegt der Fehler?

Joachim

Schau mal hier: How to Add Custom Font to Website through @fontface?

Das sieht nicht korrekt aus, wie du es machst.

paresy

Hallo Paresy,

vielen Dank für Deinen Link. Mein Versuche blieben leider bisher erfolglos. Vielleicht hat doch jemand mal ein passendes Beispiel parat, wie die CSS in HTML (und ja dann eigentlich noch in PHP) zu integrieren ist?

Joachim

Hallo Leute,

nach vielen - leider immer noch erfolglosen - Versuchen, die begleitet waren von Internetrecherche nach einem funktionierenden Beispiel sieht es an den wesentlichen Punkten so aus:

$table .= '<td class="tg-611x"><font face="myfont">'.$Value." €".'</td>';

Ich vermute das diese so im Prinzip korrekt ist, den wenn ich für „myfont“ etwas einsetze wie „Ariel“ ändert sich die Schriftart dieser Zelle tatsächlich.

Dem Link von Paresy folgende habe ich die eigentliche Schriftart in „woff“ und „woff2“ umgewandel, so dass ich diese neben der tty zur Verfügung stelle.

Der Teil, der die notwendigen Information für „myfont“ zur Verfügung stellt sieht jetzt so aus:

$table = '<style type="text/css">';
	$table .= '<link rel="stylesheet" href="./.../webfront.css">';
        $table .= '@font-face { ';
        $table .= 'font-family: "myfont"; ';
        $table .= 'src: url('.$FileName2.') format("woff2"), ';
        $table .= 'url('.$FileName1.') format("woff"), ';
        $table .= 'url('.$FileName.') format("truetype"); ';
        $table .= 'font-weight: normal; ';
        $table .= 'font-style: normal; } ';
        $table .= 'div { ';
        $table .= 'font-family: "myfont"; ';
        $table .= '} ';
        $table .= "</style>";

Die Richtigkeit der Pfade bzw. Dateinamen wurde geprüft.
Ich vermute aber gerade hier den Fehler weil „myfont“ offenbar einfach ignoriert wird…

Vielleicht sieht ja jemand wo der Fehler ist?

Joachim

Wie ist denn der Pfad in $Filename2?

paresy

Hallo Paresy,

ich vermute ich weiß worauf Du hinaus möchtest…

Alle Schriftarten sind im modules-Ordner im „libs“ des Moduls…

Joachim

Und wie soll dann dein Browser auf diese Dateien zugreifen können?

Michael

Ich nutzte für so was Google Fonts. Kannst aber z.B. Google Fonts, Adobe Fonts, Edge Fonts usw. nutzten.

Im Header lädst Du die Schriftart und definierst eine Klasse für Deine Darstellung. In der Tabelle oder irgendeinem anderen Element kann auch div sein weist Du dann die Klasse zu, dann bekommst Du das auch in der passenden Schriftart, Größe und Farbe angezeigt.


<?php
$value = GetValue(55238);

$html = '<!DOCTYPE html><html><head><meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> <style>html{background:transparent;color:#000;font-family:sans-serif;padd
ing:10px;}     
.Roboto{font-family: \'Roboto\', sans-serif;
font-size: 70px;
color: rgb(213,244,254);
color: rgba(213,244,254,1);
text-shadow: 4px 4px 6px #39aaeb;}
</style>
</head><body>
<table>
<td class = "Roboto">' . $value . '€</td>
</table>
</body></html>';
SetValue(28963, $html);

Hallo Leute,

hatte auch mal mit diesen Online-Fonts probiert, hatte dort aber nicht das gefunden was ich suchte.

Ist es denn legitim mit einem Modul etwas auszuliefern, es in ein bestimmtes Verzeichnis zu kopieren? In welches Verzeichnis müsste es?

Joachim

Nein ist nicht legetim.
Du kannst aber einen Webhook nutzen.
Michael

Ist es das was Du suchst?


$value = GetValue(55238);



$html = '<!DOCTYPE html><html><head><meta charset="utf-8" />
<link href="//db.onlinewebfonts.com/c/292662136c79f326952c07f076a4e7f9?family=Advanced+Pixel+LCD-7" rel="stylesheet" type="text/css"/>
<style>@font-face {font-family: "Advanced Pixel LCD-7"; src: url("//db.onlinewebfonts.com/t/292662136c79f326952c07f076a4e7f9.eot"); src: url("//db.onlinewebfonts.com/t/292662136c79f326952c07f076a4e7f9.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/292662136c79f326952c07f076a4e7f9.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/292662136c79f326952c07f076a4e7f9.woff") format("woff"), url("//db.onlinewebfonts.com/t/292662136c79f326952c07f076a4e7f9.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/292662136c79f326952c07f076a4e7f9.svg#Advanced Pixel LCD-7") format("svg"); }
.LCD{font-family: \'Advanced Pixel LCD-7\'} 
</style>
</head><body>
<table>
<td class="LCD">' . $value . '€</td>
</table>
</body></html>';
SetValue(28963, $html);

…,allen drei einen herzlichen Dank!

Ich habe jetzt die Idee von Fonzo aufgegriffen, mit Webhooks habe ich zwar das eine oder andere schon gemacht, wußte aber so spontan nicht wie da rangehen sollte.

Mit Online-Fonts habe ich auch schon in einem anderen Modul gearbeitet (Pioneer VSX Receiver)

In meinem Enigma-Modul bin ich seinerzeit (hat ja schon ein paar Jahre auf dem Buckel) so vorgegangen, wie Michael es heute als nicht legitim bezeichnet hat - die hunderten von Programm-Picons werden gezipt im Modul mitgeliefert, entpackt und in den Webfront/User-Ordner kopiert.

Bei dem Fonts gibt es ja online-Wege, bei den Picons wäre das zwar nicht unmöglich aber schon ein wenig schwieriger, weil ja irgendwer die Picons online zur Verfügung stellen müsste…[emoji848]

Joachim

Ich liefere bei dem Kodi Modul die Bilder als base64 direkt innerhalb des IMG Tag.
Das geht auch problemlos (bis 1MB, Limit der String Variablen).
Michael