✔ <font> -> <span>

T

Thomasio

Erfahrenes Mitglied
Nachdem ich gerade (besser spät als nie) herausgefunden habe, dass das font Element als veraltet gilt und man stattdessen <span style="..."> verwenden soll stehe ich vor einem Problem, weil ich die richtige Entsprechung nicht finde.
Ich habe sogar den Eindruck, dass die Browser in <span> andere default Schriftarten verwenden als in <font>.

Darum die Frage: Gibt es irgendwo eine Liste, wo man das abgleichen kann?

Wenn in der alten Version steht

<font size="2"><b>Text</b></font>

Welcher CSS style ergibt dieselbe Anzeige?

Ganz andere Frage:
Meine Webseite enthält Unmengen von <font>, die alle zu ändern wäre unglaublich viel Arbeit.
Im Moment scheinen die Browser das ja noch zu unterstützen, aber wie lange noch?
 
Hi,
also das &lt;font&gt; ist als „deprecated“ eingestuft, heißt es ist missbilligt und nicht nicht erlaubt.
Wie lang dies noch unterstützt wird, ist schwer zu sagen, ich denke mal das dies bis zum Sankt Nimmerleinstag unterstützt wird. Den die Browser müssen ja HTML 4 wegen der Rückwertskompatibilität dies weiterhin unterstützen und somit auch die HTML-Elemente welche aufgrund eines verbessert umgesetzten Struktur/Aussehen Trennen Konzeptes.
Aber bevor du anfängst und alles mit Inlinestyles versiehst fang doch an mal CSS richtig zu lernen und deine Styles in eine eigene Datei zu packen. Die Überflüssigen <font>-Elemente kannst du ja per Suchen und Ersetzen auf einmal löschen.

Nun zu deiner Frage welches CSS-Style die gleiche Ausgabe erzeugt.
Da die Angaben im Font-Element relativ auf die Einstellungen im Browser bezieht wäre im Stylesheet die Größenangabe em die richtige (http://de.selfhtml.org/css/formate/wertzuweisung.htm)

Ich habe sogar den Eindruck, dass die Browser in <span> andere default Schriftarten verwenden als in <font>
Zum Vergrößern anklicken....
Nein, soweit dies nicht vom Nutzer bzw. einem Stylesheet vorgegeben wird.

Viele Grüße
 
Danke für die Antwort.
Zumindest bin ich ein wenig beruhigt, dass meine (15 Jahre alte) Webseite auch ohne Runderneuerung vorläufig noch richtig angezeigt wird.

Ich weiss, dass ich CSS in eine separate Datei packen kann, aber am Arbeitsaufwand ändert das nichts, eher im Gegenteil.
Übersichtlicher hin oder her, wenn ich im Moment sowas habe

Code: 
<p>
<font color="red" size="5"><b>Text</b></font><br>
<font color="blue">Text</font>
</p>

dann kann ich nicht einfach die font TAGs löschen und im Stylesheet <p> eine fest definierte Schriftfarbe geben.
Da muss ich entweder <span> rein machen, oder sämtliche <p> und <td> usw. in Klassen einteilen, die alle im Stylesheet definieren und dann brauche ich immer noch diverse <span>, die auch wieder in Klassen eingeteilt werden müssen, sobald ein Absatz oder eine Tabellenzelle mehr als eine Schriftgrösse oder -farbe braucht.
 
Hi,

ich denke bei deinem Problem hilft höchstens ne RegEx.

Ich hab dir mal nen kleinens Java-Programm geschrieben.
Dabei muss aber folgendes erfüllt sein:
  • <font>, nicht <FONT>
  • size-Attribut UND/ODER color-Atribut gesetzt
Mir ist klar, dass man die size-Angaben eigentlich nicht in css-font-size angaben in px übersetzen kann, aber was anderes ist mir nicht eingefallen.
Ich habe die Werte so gewählt dass es im Google Chrome mit Standard-Einstellungen gleich aussieht.

Hier der Quellcode:
Java: 
import java.io.BufferedReader;
import java.io.FileReader;
import java.io.File;
import java.io.BufferedWriter;
import java.io.OutputStreamWriter;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.FileNotFoundException;

public class CSSRenovierer {

	public static void main(String[] args) {
		if(args.length == 0)
			System.err.println("Usage: java CSSRenovierer files...");
		else{
			for(int i=0; i<args.length; i++){
				try{
					// Eilesen der Datei
				    BufferedReader reader = new BufferedReader(new FileReader(args[i]));
				    String line;
				    StringBuilder sb = new StringBuilder();
				    while((line = reader.readLine()) != null){
				        sb.append(line);
				        sb.append(System.getProperty("line.separator"));
				    }
				    reader.close();
					String content = sb.toString();
					content = content.substring(0, content.length()-System.getProperty("line.separator").length());
					// ERSÄTZUNGEN
						int[] modernSizes = {11, 13, 16, 19, 24, 33, 47};
						// color & size
						for(int j=0; j<modernSizes.length; j++)
							content = content.replaceAll("<font(\\s+)color=\"(.*?)\"\\s+size=\"" + (j+1) + "\">(.*?)</font>", "<span$1style=\"color: $2; font-size: " + modernSizes[j] + "px;\">$3</span>");
						// size
						for(int j=0; j<modernSizes.length; j++)
							content = content.replaceAll("<font(\\s+)size=\"" + (j+1) + "\">(.*?)</font>", "<span$1style=\"font-size: " + modernSizes[j] + "px;\">$2</span>");
						// color
						content = content.replaceAll("<font(\\s)color=\"(.*?)\">(.*?)</font>", "<span$1style=\"color: $2;\">$3</span>");
					// Speichern
					File f = new File("renovierer");
                	if(!f.exists()) f.mkdir();
					BufferedWriter out = new BufferedWriter(new OutputStreamWriter(new FileOutputStream("renovierer/" + args[i])));
		            out.write(content);
		            out.close();
				}
				catch(FileNotFoundException ex){
				    System.err.println(ex);
				}
				catch(IOException ex){
				    System.err.println(ex);
				}
			}
		}
		
	}	

}

Das ausführbare Programm ist im Anhang.
Ruf es dann so auf:
Code: 
java -jar CSSRenovierer.jar file1.html file2.html file3.html

Deine Dateien werden selbstverständlich nicht überschrieben, sondern Kopien in ein Unterverzeichnis "renoviert" erstellt!
Die Datei CSSRenovierer.jar MUSS IMMER im Verzeichnis der zu bearbeitenden HTML-Dateien sein.
 

Anhänge

  • CSSRenovierer.jar
    1,9 KB · Aufrufe: 4
Wow, da hast du dir richtig viel Arbeit gemacht, ich sage ganz herzlich danke schön.

So ganz passt es nicht für mich, weil da noch einiges mehr zu bearbeiten ist, z.B. Links, wo ich <a href="..."><font ...> drin habe, und wenn ich schon dabei bin, sollten auch die <b> übersetzt werden in font-weight, aber das ist mit einem Programm kaum zu machen, spätestens wenn innerhalb von einem <font> TAG mehrmals <b> </b> vorkommt, oder auch andersrum.

Mittlerweile habe ich noch rausgefunden, dass size 2,3,4,5,6,7 in CSS font-size: small, normal, large, x-large, xx-large entspricht.

Aber du hast mir einen guten Ansatz gegeben, den übersetze ich mir nach C++, da kann ich auch gleich eine Schleife einbauen, die alle Dateien im Verzeichnis samt Unterverzeichnisse selber sucht, sonst müsste ich über 500 Dateinamen an den Aufruf hängen.

Nochmal vielen Dank.
 
Hi,

warum soll denn <b>...</b> --> <span style="font-weight: bold;">...</span> nicht funktionieren?

Java: 
content = content.replaceAll("<b>(.*?)</b>", "<span style=\"font-weight: bold;\">$1</span>");
... sollte die Sache eigentlich erledigen, oder?

Was ist das Problem bei den Links?
- dass der default-style unterstrichen und blau ist?
Wenn ja, dann füge doch einfach folgendes CSS hinzu:
CSS: 
a{
    color: black;
    text-decoration: none;
}
 
Klar funktioniert das mit dem <b>, es war halt in deinem Code nicht drin, sprich werde ich einfügen.
Geschickt wäre halt, wenn ich nicht 2 <span> brauche, wo ich <font ...><b>Text</b></font> habe.
Mit den Links, das ist ähnlich, werde ich auch einfügen, weil ich da ja keinen extra <span> brauche, sondern den style gleich ins <a> rein machen kann.
Aber das sind alles Kleinigkeiten, das schaffe ich schon.

Fehlt nur die Schleife, die sämtliche Dateien und Unterverzeichnisse selber sucht, aber das habe ich in C++ schon in einem anderen Projekt gebraucht, sprich habe ich schon.
 
Hi,
Mittlerweile habe ich noch rausgefunden, dass size 2,3,4,5,6,7 in CSS font-size: small, normal, large, x-large, xx-large entspricht.
Zum Vergrößern anklicken....
und alle diese Werte sind relative Werte und beziehen sich auf das was der Benutzer im Browser eingestellt hat, was auch em macht.

Nur so am Rande, Inline Stylesheets zerstören das Konzept der Trennung von Inhalt, Struktur und Aussehen.

Viele Grüße
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück