CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

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.

Synes godt om

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

Synes godt om

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

Synes godt om

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 :)

Synes godt om

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.

Synes godt om

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

Synes godt om

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

Synes godt om

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? :)

Synes godt om

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 :)

Synes godt om

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

Synes godt om

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.

Synes godt om

combinedesigns Nybegynder

09. juni 2005 - 20:39 #11

Der er adgang til php :) og mysql, hvis det skulle bruges.

Synes godt om

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

Synes godt om

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? :)

Synes godt om

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

Synes godt om

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? :)

Synes godt om

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 = ''; // skal rettes til: <img src="
var kode_slut = ''; // 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>

 
Tekst 1: dette er noget tekst
 
Tekst 2: og noget andet tekst

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

/theSurfer

Synes godt om

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

Synes godt om

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

Synes godt om

flashn00b Nybegynder

09. juni 2005 - 21:56 #19

Du kan nemt lave det med PHP GDLIB ;)

Synes godt om

thesurfer Nybegynder

09. juni 2005 - 21:58 #20

flashn00b> ..siger du det først nu......? :-)

/theSurfer

Synes godt om

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

Synes godt om

thesurfer Nybegynder

09. juni 2005 - 22:11 #22

Så! :-)
Nu kan den også håndtere tags (<img...>, , 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 = ''; // skal rettes til: <img src="
var kode_slut = ''; // 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

Synes godt om

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

Synes godt om

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.

Synes godt om

saudoo Nybegynder

09. juni 2005 - 23:04 #25

Der er en demo i toppen:
http://www.stewartspeak.com/dtr/demo/

Synes godt om

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

Synes godt om

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

Synes godt om

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

Synes godt om

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 :)

Synes godt om

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

Synes godt om

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 = ''; // skal rettes til: <img src="
var kode_slut = ''; // 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>

 
Tekst 1: dette er noget <img src="elogo.gif" /> tekst
 
Tekst 2: og noget andet tekst

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

/theSurfer

Synes godt om

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

Synes godt om

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...

Synes godt om

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

Synes godt om

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 tags.. så skulle den gerne lave alt i mellem <body> og </body>..

/theSurfer

Synes godt om

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. :)

Synes godt om

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

Synes godt om

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

Synes godt om

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

Synes godt om

combinedesigns Nybegynder

13. juni 2005 - 13:23 #40

Tak. Jeg søgte faktisk dette, men vidste ikke helt hvad det hed :)

Synes godt om

combinedesigns Nybegynder

13. juni 2005 - 14:34 #41

Woah! Det virker jo helt perfekt :D

http://tinypurplepixy.frac.dk/

Synes godt om

combinedesigns Nybegynder

13. juni 2005 - 18:33 #42

eller... det gjordet ikke.. i hvertfald ikke i Internet Explorer.

Synes godt om

combinedesigns Nybegynder

13. juni 2005 - 18:58 #43

du kan hjælpe herinde, hvis du vil :)
http://eksperten.dk/spm/625689

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Programmeringssprog kurser

Kurser inden for grundlæggende programmering

Se alle Programmeringssprog kurser

Flere spørgsmål fra Andet programmering kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Kodning af element i custom css Af Jacob Hedelund i Andet programmering	3	14/10/202410:35	14/10/202419:46
Delphi 11 - converter webp til jpg fil Af juzas i Andet programmering	5	12/10/202413:28	14/10/202403:54
Trim tekst i batch script Af Dan Elgaard i Andet programmering	5	05/09/202411:08	10/09/202415:29
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

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS