CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede combinedesigns Nybegynder
09. juni 2005 - 20:12 Der er 42 kommentarer og
1 løsning

Vise sin egen skrifttype på side?

Hej.

Jeg er gået igang med en hjemmeside. Jeg har fundet en skrifttype, som jeg gerne vil have bliver vist på siden istedet for de almindelige skrifttyper. Hvordan gør man det?

Fx kunne skrifttypen jeg har blive downloaded i en temp-mappe, hvorefter man vil kunne se siden med den skrifttype jeg har.
Avatar billede thesurfer Nybegynder
09. juni 2005 - 20:14 #1
Nej.
Brugeren skal selv downloade fonten, og placere den i font-mappen (ligger i Windows mappen).
Brugeren skal muligvis genstarte browseren/computeren.

/theSurfer
Avatar billede thesurfer Nybegynder
09. juni 2005 - 20:18 #2
Jeg går ud fra, at skrifttypen er en ekstern skrifttype.. dvs, det er ikke en del af operativ systemet (Windows, Linux, osv..).. dvs, det er en bruger/person, der har lavet fonten..

Er dette korrekt?

/theSurfer
Avatar billede combinedesigns Nybegynder
09. juni 2005 - 20:18 #3
Kender godt den metode. Men jeg har set andre sider, hvor de bruger denne funktion, jeg skrev ovenover med temp-mappen. Nu søger jeg en metode at programmere det - ikke alene den metode. Hvis der findes lettere er det klart fortrukken :)
Avatar billede combinedesigns Nybegynder
09. juni 2005 - 20:19 #4
Jojo.. skrifttypen er en .ttf format, man kan kopiere ind i windows\fonts, så vil den virke.
Avatar billede thesurfer Nybegynder
09. juni 2005 - 20:20 #5
De andre sites, har garanteret lavet menuer (osv..) med grafik.. dvs, billeder.. så man kan lave mange forskellige fonts..

Man kunne også lave hele alfabetet i billeder, og derefter erstatte alle bogstaver med billeder.. det tager lidt tid at loade første gang, da hele alfabetet lige skal caches.. og det ser nok lidt sjovt ud, når den "skriver" teksten på dine sider :-)

/theSurfer
Avatar billede thesurfer Nybegynder
09. juni 2005 - 20:21 #6
Ang "09/06-2005 20:19:33"/ ttf:

Det er altså en "ekstern"/selvlavet (af en anden/privat person, ikke af MS)?

/theSurfer
Avatar billede combinedesigns Nybegynder
09. juni 2005 - 20:32 #7
ja, det er lavet af en person og ikke ms (er jeg rimelig sikker på). den er fundet på dafont.com.

Men hvordan laver man så det, som du siger, at alfabeten er lavet i billeder også erstattes bogstaver med billederne? :)
Avatar billede combinedesigns Nybegynder
09. juni 2005 - 20:37 #8
Jeg ved godt at jeg skal til at lave en hver billede i fx photoshop og gemme med gennemsigtig baggrund i enten gif eller png format - skal bare bruge en kode eller lignende til det :)
Avatar billede thesurfer Nybegynder
09. juni 2005 - 20:38 #9
Hvilket sprog råder du over? Er det kun HTML+JavaScript, eller har du adgang til ASP/PHP/osv..?

/theSurfer
Avatar billede combinedesigns Nybegynder
09. juni 2005 - 20:38 #10
Men tilbage til emnet, så er jeg faktisk rimelig sikker på, at eksemplet jeg skrev i toppen er blevet brugt før. Jeg mener selv at have været inde på sådan en side, som har brugt den metode. Jeg kan dog ikke huske, hvilken side det var.
Avatar billede combinedesigns Nybegynder
09. juni 2005 - 20:39 #11
Der er adgang til php :) og mysql, hvis det skulle bruges.
Avatar billede thesurfer Nybegynder
09. juni 2005 - 20:42 #12
Så kan man vel lave et script, som går din tekste igennem, og erstatter bogstaverne

Dvs, "a" erstattes med <img src="a.gif">

Så "hej" kommer til at se sådan ud:

<img src="e.gif"><img src="e.gif"><img src="j.gif">


Metoden kan dog ikke anbefales :-)

/theSurfer
Avatar billede combinedesigns Nybegynder
09. juni 2005 - 20:49 #13
Nej, det kan jeg godt se.
Men hvis en script skulle laves, hvordan ville den så se ud? :)
Avatar billede thesurfer Nybegynder
09. juni 2005 - 20:54 #14
Hentes teksten fra en database, eller står den i direkte i filerne?

Hvis den står i database, kan det laves med PHP.. ellers skal du have fat i JavaScript..

/theSurfer
Avatar billede combinedesigns Nybegynder
09. juni 2005 - 21:03 #15
det står direkte på siden.
mine programmeringsevner er ikke så vildt høje igen :P så hvordan vil det JacaScript se ud? :)
Avatar billede thesurfer Nybegynder
09. juni 2005 - 21:38 #16
Eksempel:


<script type="text/JavaScript">

function txt2img(sid)
{
var objektet = document.getElementById(sid);
var teksten = objektet.innerHTML;
var bogstav = "";
var nytekst = "";

var kode_start = '<font color="#ff0000">'; // skal rettes til: <img src="
var kode_slut = '</font>'; // skal rettes til: .gif" />

teksten = teksten.replace(/ /gi, "þ");

for (i=0; i < teksten.length+1; i++) {
bogstav = teksten.substr(teksten.length - i,1);
nytekst = kode_start + bogstav + kode_slut + nytekst;
}

nytekst = nytekst.replace(/þ/gi, " ");

objektet.innerHTML = nytekst;
}
</script>

<br><BR>
Tekst 1: <span id="tekst1">dette er noget tekst</span>
<br><br>
Tekst 2: <span id="tekst2">og noget andet tekst</span>

<br><br><a href="#" onclick="txt2img('tekst1');return false">Skfit tekst 1</a>
<br><br><a href="#" onclick="txt2img('tekst2');return false">Skift tekst 2</a>

/theSurfer
Avatar billede thesurfer Nybegynder
09. juni 2005 - 21:42 #17
Man indsætter altså teksten i nogle bokse (SPAN-tags), og giver dem et unikt ID.. ID'er må ikke gentages..

Man kan så lave en funktion, der automatisk laver teksterne om, og den kan så aktiveres via onload:

<body onload="skifttekst">

og:

function skifttekst()
{
txt2img('tekst1');
txt2img('tekst2');
}


/theSurfer
Avatar billede thesurfer Nybegynder
09. juni 2005 - 21:55 #18
hmm.. kom lige i tanke om almindelige billede.. så jeg testede lige.. og det virker ikke.. dvs, billederne forsvinder..

/theSurfer
Avatar billede flashn00b Nybegynder
09. juni 2005 - 21:56 #19
Du kan nemt lave det med PHP GDLIB ;)
Avatar billede thesurfer Nybegynder
09. juni 2005 - 21:58 #20
flashn00b> ..siger du det først nu......? :-)

/theSurfer
Avatar billede thesurfer Nybegynder
09. juni 2005 - 22:01 #21
Jeg burde have søgt på det, på nettet.. dammit..

Her er et PHP-eksempel (ikke PHP GDLIB): http://www.phpfreaks.com/quickcode/Letters_to_Images/101.php

/theSurfer
Avatar billede thesurfer Nybegynder
09. juni 2005 - 22:11 #22
Så! :-)
Nu kan den også håndtere tags (<img...>, <b>, osv..):

function txt2img(sid)
{
var skift = 'ja'; // bestemmer om bogstavet skal laves om
var objektet = document.getElementById(sid); // objektet/boksen der indeholder teksten
var teksten = objektet.innerHTML; // selve teksten
var bogstav = ""; // variabel der kommer til at indeholde bogstaver
var nytekst = ""; // den nye tekst, der skal smides tilbage i boksen

var kode_start = '<font color="#ff0000">'; // skal rettes til: <img src="
var kode_slut = '</font>'; // skal rettes til: .gif" />

teksten = teksten.replace(/ /gi, "þ");

for (i=0; i < teksten.length+1; i++) {
bogstav = teksten.substr(teksten.length - i,1);

if (bogstav == ">") skift = 'nej'; // et tag startes, så den skal ikke længere virke

if (skift == 'ja') {
  // bogstavet skal laves om:
  nytekst = kode_start + bogstav + kode_slut + nytekst;
} else {
  // vi er inde i et tag, og bogstavet skal derfor ikke laves om:
  nytekst = bogstav + nytekst;
}

if (bogstav == "<") skift = 'ja'; // et tag afsluttes, så nu skal den virke igen

}

nytekst = nytekst.replace(/þ/gi, " ");

objektet.innerHTML = nytekst;

}

/theSurfer
Avatar billede thesurfer Nybegynder
09. juni 2005 - 22:14 #23
tegnet "þ" ersatter mellemrum (" "), da man ikke kan have en fil, der hedder " .gif".. så den kommer til at hedde "þ.gif"..

/theSurfer
Avatar billede saudoo Nybegynder
09. juni 2005 - 23:03 #24
Men vil den ikek stadig lave et <img>-tag med et genereret billede, for hver eneste bogstav?

Hvad med om den omdannede teksten til et stort felt..?
http://www.alistapart.com/articles/dynatext/

Tror det kan bruges.
Avatar billede saudoo Nybegynder
09. juni 2005 - 23:04 #25
Der er en demo i toppen:
http://www.stewartspeak.com/dtr/demo/
Avatar billede Spotgun Seniormester
09. juni 2005 - 23:16 #26
Hvis du ved at dine brugere på siden alle kører med Internet Explorer, så var det måske en idé at kigge på WEFT (Web Embedding Font Tools) fra Microsoft. Så vidt jeg husker er det gratis, og jeg lavede et par tests med det for et års tid siden.

Det fungerede såmænd ganske udemærket...

Læs mere om det her, og hent de ting du skal bruge:
http://www.microsoft.com/typography/WEFT.mspx
Avatar billede thesurfer Nybegynder
09. juni 2005 - 23:17 #27
"...<img>-tag med et genereret billede, for hver eneste bogstav":
Jo, det var jo også meningen :-)

1 billede per bogstav..

Men som jeg skrev i 09/06-2005 20:42:23: Metoden kan dog ikke anbefales :-)

/theSurfer
Avatar billede thesurfer Nybegynder
09. juni 2005 - 23:21 #28
"Hvis du ved at dine brugere på siden alle kører med Internet Explorer".. :-)

Der er flere og flere der skifter til alternative browsere.. MS halter bag ud, mister hele tiden markedsandele.. så det tror jeg ikke på :-)

/theSurfer
Avatar billede Spotgun Seniormester
09. juni 2005 - 23:36 #29
Det er jeg såmænd også udemærket klar over, syntes bare alternativet skulle nævnes. Det kræver i hvert fald væsentligt mindre arbejde at implementere :)
Avatar billede combinedesigns Nybegynder
10. juni 2005 - 00:17 #30
thesurfer> kan du ikke lave en eksempel med det javascript, så skal jeg prøve det. For det ser ud til at være den bedste løsning alligevel, selv om jeg kunne foretrække et bedre løsning.
(hvor jeg derefter let kan kopiere teksten fra "vis kilde")

men det link du giver i 09/06-2005 22:01:32: kan du lave også et eksempel på det - med hele alfabeten og alle tal og poste det også? så kan jeg teste bægge to og se, hvilken der passer mig bedst.

spotgun> jeg bruger allerede selv firefox, så desværre.

saudoo> det ser ud til at være noget :P

Jeg kigger tilbage imorgen :) sov godt så længe
Avatar billede thesurfer Nybegynder
10. juni 2005 - 17:01 #31
Her er et eksempel i java script: http://frip.dk/thesurfer/e/q/624764/index.htm

Jeg har lavet lidt om på koden..

Koden:

<script type="text/JavaScript">

function txt2img(sid)
{
var skift = "ja"; // bestemmer om bogstavet skal laves om
var objektet = document.getElementById(sid); // objektet/boksen der indeholder teksten
var teksten = objektet.innerHTML; // selve teksten
var bogstav = ""; // variabel der kommer til at indeholde bogstaver
var nytekst = ""; // den nye tekst, der skal smides tilbage i boksen

var kode_start = '<font color="#ff0000">'; // skal rettes til: <img src="
var kode_slut = '</font>'; // skal rettes til: .gif" />

kode_start = '<img src="';
kode_slut = '.gif" />';

for (i=0; i < teksten.length; i++) {
bogstav = teksten.substr(i,1);

if (bogstav == "<") skift = "nej"; // et tag afsluttes, så nu skal den virke igen

if (bogstav == " " && skift == "ja") bogstav = "SPACE";

if (skift == "ja") {
  // bogstavet skal laves om:
  nytekst = nytekst + kode_start + bogstav + kode_slut;
} else {
  // vi er inde i et tag, og bogstavet skal derfor ikke laves om:
  nytekst = nytekst + bogstav;
}

if (bogstav == ">") skift = "ja"; // et tag startes, så den skal ikke længere virke

}

objektet.innerHTML = nytekst;

}
</script>


<br><BR>
Tekst 1: <span id="tekst1">dette er <b>noget</b> <img src="elogo.gif" /> tekst</span>
<br><br>
Tekst 2: <span id="tekst2">og noget andet tekst</span>

<br><br><a href="#" onclick="txt2img('tekst1');return false">Skfit tekst 1</a>
<br><br><a href="#" onclick="txt2img('tekst2');return false">Skift tekst 2</a>

/theSurfer
Avatar billede thesurfer Nybegynder
10. juni 2005 - 17:12 #32
Mht PHP: Jeg kan desværre ikke lave et bedre eksempel, end det i 09/06-2005 22:01:32.

/theSurfer
Avatar billede combinedesigns Nybegynder
11. juni 2005 - 02:16 #33
jeg har haft fingrerne i javascriptet og det som saudoo anbefaler.. men ingen af dem virker desværre. ellers kan det være det er mig, som gør noget forkert - mine evner indenfor programmering er ikke SÅ store igen :)

men jeg har dog stadig ikke set på den php-kode du har linket til thesurfer...
Avatar billede thesurfer Nybegynder
11. juni 2005 - 17:58 #34
Har du set eksemplet http://frip.dk/thesurfer/e/q/624764/index.htm? Det skulle meget gerne virke, som beskrevet.. og du skal ikke programmere noget som helst :-)

/theSurfer
Avatar billede thesurfer Nybegynder
11. juni 2005 - 18:06 #35
hmm.. hvis du ersatter

objektet = document.getElementById(sid);

med

objektet = document.body;

behøver du vist ikke at lave <span></span> tags.. så skulle den gerne lave alt i mellem <body> og </body>..

/theSurfer
Avatar billede combinedesigns Nybegynder
11. juni 2005 - 18:26 #36
thesurfer> jep, det fandt jeg ud af :)
det var bare mig, der rodede for meget rundt hehe..

men kan du ikke gøre at ens eget skrifttype (billederne) bliver loaded med det samme - fx OnLoad - istedet at man skal klikke på et link, som i dette tilfælde er: "Skfit tekst 1".
Det skal nemlig bruges til indholdet af en side :)

ellers må du gerne ligge et svar, for det ser ud til at det bliver den løsning jeg slutter af med, selv om jeg kunne foretrække et bedre. :)
Avatar billede thesurfer Nybegynder
12. juni 2005 - 01:09 #37
Prøv det her:

<html>
<head>
<script type="text/JavaScript">

function skift()
{
txt2img("tekst1");
txt2img("tekst2");
txt2img("tekst3");
// osv...
}

</script>

<body onload="skift()">
indeholdet her..
</body>
</html>


Hvis du har valgt at bruge "var objektet = document.body;", kan du nøjes med:

<body onload="txt2img()">

og

function txt2img()  // der skal ikke længere være "(sid)"..


Hvis du har flere spørgsmål, skyder du dem bare af :-)

/theSurfer
Avatar billede combinedesigns Nybegynder
12. juni 2005 - 21:20 #38
så ser det ud til at virke.. jeg takker for hjælpen :)
har også afsat 25 points ekstra for hjælpen.

du kan se, hvad det skulle bruges til her: http://tinypurplepixy.frac.dk/ :)

jeg takker endnu en gang
Avatar billede thesurfer Nybegynder
13. juni 2005 - 01:41 #39
Det var så lidt :-)

Jeg har et forslag.. på din start side, loader/cacher du dine billeder.. så skal browseren ikke sidde og loade dem, når de skal vises..

Jeg fandt det her, efter en søgning på "javascript preload crossbrowser progressbar" (google søgning http://www.google.com/search?q=javascript+preload+crossbrowser+progressbar ) :

LoadingBar (af Thomas Brattli) - http://www.dhtmlcentral.com/script/script.asp?id=17

Google forslår en søgning på "javascript preload cross browser progress bar": http://www.google.com/search?hl=en&q=javascript+preload+cross+browser+progress+bar

/theSurfer
Avatar billede combinedesigns Nybegynder
13. juni 2005 - 13:23 #40
Tak. Jeg søgte faktisk dette, men vidste ikke helt hvad det hed :)
Avatar billede combinedesigns Nybegynder
13. juni 2005 - 14:34 #41
Woah! Det virker jo helt perfekt :D

http://tinypurplepixy.frac.dk/
Avatar billede combinedesigns Nybegynder
13. juni 2005 - 18:33 #42
eller... det gjordet ikke.. i hvertfald ikke i Internet Explorer.
Avatar billede combinedesigns Nybegynder
13. juni 2005 - 18:58 #43
du kan hjælpe herinde, hvis du vil :)
http://eksperten.dk/spm/625689
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Flere spørgsmål fra Andet programmering kategorien

Titel Indlæg Oprettet Seneste aktivitet
ASP Classic fil fra subfolder Af bsn i Andet programmering 3 07/05/202416:14 08/05/202401:00
Session Variable Af bsn i Andet programmering 3 01/05/202409:44 02/05/202409:29
Modifyed Field for all Records in Access Af ingeman i Andet programmering 2 29/04/202416:05 30/04/202407:19
Delphi - Parser JSON Fil Af juzas i Andet programmering 4 25/02/202407:13 28/02/202420:56
Bat fil Af sjass i Andet programmering 5 15/01/202417:45 15/01/202420:35
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 16:05 win 10 vil ikke boote Af bb69 i Windows
I dag 11:20 Lenovo x390 Af tobberjas i PC
I dag 10:14 Alder i Excel Af Nanarsi i Excel
I dag 09:00 Flere linier på faneblad Af Peder Lund Nielsen i Excel
I går 21:35 Flash Player Af ErikHg i Andet software
White papers
Flere white papers »


Premium
Teaser billede
Rigsrevisionen kritiserer fire statslige myndigheder for dårlig it-sikkerhed: Har haft seks år til at løse problemet
Læs mere »
Microsofts nye Windows 11-funktion kaldes ”en guldgrube for hackere”
"Jeg var den sjette medarbejder, der blev ansat dengang, i dag er vi over 1000"
Twoday rykker hovedkontoret til Nordhavn: Opsiger flere lejemål og samler kontorer
Se alle »
Computerworld
Teaser billede
MobilePay ændrer på funktion få måneder efter stor opdatering
Læs mere »
Den næste version af Windows 11 er nu tilgængelig for de første brugere: Se, hvad du kan forvente
Kæmpemæssig AI-opdatering styrer mod din iPhone: Derfor bliver iOS 18 særlig interessant
Test af Apples magtdemonstration: Den nye iPad Pro er klodens bedste tablet – men måske det ikke er nok alligevel?
Se alle »
CIO
Teaser billede
Energinet får igen kritik for milliardstor outsourcing: To væsentlige it-sikkerhedstiltag er ikke blevet indført til tiden
Læs mere »
Nomineret til Årets CIO: Martin Wood har skabt en leveringsmaskine hos Domstolsstyrelsen - Håber det kan inspirere andre offentlige myndigheder
Han er en af Danmarks bedste CIO’er: Topdanmarks Kasper Tjørntved Davidsen står i spidsen for digitale transformationer til milliarder af kroner
Bestyrelser på pinebænken under hackerangreb: "Altså 500.000 euro i løsesum er jo ikke så meget"
Se alle »
Job & Karriere
Teaser billede
Her er Danmarks fem bedste CIO’er lige nu: Se de fem nominerede til prisen som Årets CIO 2024
Læs mere »
Medarbejderne fik udleveret badetøfler ved indflytningen: Kom med inden for i IBM Danmarks nye topmoderne hovedkontor
Google fyrer hele sit Python-team
Får du den løn, du fortjener? Få overblikket over hvor meget dine kolleger tjener hver måned
Se alle »
White paper
Teaser billede
Opdag fordelene ved cloud-baseret backup og recovery
Læs mere »
Nemmere overblik, styring og omkostningskontrol i dit multicloud-miljø
Unbreakable - sådan sikrer du dig vedvarende og uafbrudt adgang til dine data
Whitepaper: Komplet sikkerhedsguide til Kubernetes
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »