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

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 14:10 Outlook henter ikke mails Af TTA i Office & Kontorpakker
I dag 13:58 vise billeder i kartotek med store ikoner inklusive optagelsesdato Af Malm i Billedbehandling
I dag 13:35 Adobe Elements 2019, Organizer Crasher Af mort1 i Billedbehandling
I går 20:49 pop up black friday Af Malm i Virus
I går 18:31 Hvor finder jeg en netværksdriver? Af jcr18 i Wifi
White papers
Flere white papers »


Premium
Teaser billede
Vil købe tele-løsninger til det offentlige for 370 millioner kroner
Læs mere »
Efterspørgslen på AI-regnekraft er enorm - og det smitter af på priserne: "Vi kan sælge næsten alt, hvad vi får ind"
Nyt værtøj fra Microsoft: Snart kan du reparere nedbrudte Windows-enheder på distancen
Politiet skriver kontrakt på 75 millioner kroner med dansk it-firma: Medarbejdere skal flytte ind hos politiet
Se alle »
Computerworld
Teaser billede
Microsofts nye pc er ekstrem billig – men kan blive ekstrem sikker og fleksibel
Læs mere »
Test: Prøv kun disse B&O-hovedtelefoner, hvis du har råd
Kæmpe datalæk på hospital: 750.000 patienters fortrolige data lækket
Test: Audi Q6 er en super fed SUV - men gør dig selv en tjeneste og kast flere penge efter den
Se alle »
CIO
Teaser billede
Konsulenthus vil rulle Microsoft 365 Copilot ud til 200.000 ansatte
Læs mere »
Kæmpe-opgave for Danske Bank har banet vej for fuldautomatiseret migrering til cloud: Nu udbredes metoden i hele AWS
Microsofts store årlige event: De tre vigtigste nøglebudskaber fra Satya Nadella om Microsofts fremtid
Stor sag mod Microsoft kan være på vej: Beskyldes for at låse Azure-kunder fast med ulovlige metoder
Se alle »
Job & Karriere
Teaser billede
Microsoft klar med ny direktion for den danske forretning: Her er de nye direktører
Læs mere »
Efter skelsættende møde med sportscoach: Stor dansk it-arbejdsplads indfører fredags-fri og isbade i arbejdstiden
Linus Torvalds giver russiske Linux-udviklere sparket: Vil ikke have noget med dem at gøre
Topchef Sara Green mener, at der er brug for et radikalt nyt syn på it-ledelse - særligt én ny trend hader hun som pesten
Se alle »
White paper
Teaser billede
Cyberstatus 2024: Her er truslerne – og her forbereder virksomhederne sig
Læs mere »
Sådan gør du: Elektronisk dokumentudveksling i praksis
Sikkerhed uden grænser: Cisco Hypershield
SMB og cybertrusler: Brug sikkerhedsressourcerne optimalt
Se alle »

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